Merge pull request #1473 from CuBoulder/issue/1353

Expandable url has updates

CHANGELOG.md

@@ -9,6 +9,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ### Expandable url has updates
+  Series of updates to add functionality to expendables and ckeditor accordions for address bar hash updates.
+
+  Removed the duplicate expandable block js.
+  Works for expandable block's accordion/horizontal/vertical options.
+  Made global so that ckeditor accordions on any page type are affected
+
+  This does not handle nested accordions within expandable/accordion content. It doesn't need to at this moment.
+  This does not affect the FAQ page's hash stuff
+
+  Resolves #1353
+---
+
 ## [20241118] - 2024-11-18
 
 - ### Content List: Fixes the sidebar display's text

boulder_base.libraries.yml

@@ -21,6 +21,7 @@ ucb-global:
   js:
     js/bootstrap/bootstrap.min.js: {}
     js/ucb-rave-alert.js: {}
+    js/ucb-expandable-content.js: {}
   dependencies:
     - core/drupal
 
@@ -127,13 +128,6 @@ ucb-image-gallery:
       css/block/image-gallery.css: {}
       js/glightbox/glightbox.min.css: {}
 
-ucb-expandable-content:
-  version: 1.x
-  js:
-    js/expandable-content.js: {}
-  css:
-    theme:
-
 ucb-content-grid:
   version: 1.x
   css:

js/ucb-expandable-content.js

@@ -0,0 +1,37 @@
+document.addEventListener("DOMContentLoaded", function () {
+  // Check if there is a hash in the URL and open the corresponding item
+  if (window.location.hash) {
+    openAccordionItem(window.location.hash.substring(1));
+  }
+
+  // Add event listeners for all accordion or tab elements
+  document.querySelectorAll('.accordion-button, .nav-link').forEach(function (link) {
+    link.addEventListener("click", function () {
+      const href = this.getAttribute("href");
+      if (href) {
+        const hash = href.substring(1);
+        setHashWithoutJump(hash);
+      }
+    });
+  });
+});
+
+// Function to set the URL hash without causing the page to jump
+function setHashWithoutJump(hash) {
+  if (history.pushState) {
+    history.pushState(null, null, "#" + hash);
+  } else {
+    window.location.hash = hash;
+  }
+}
+
+// Function to open an accordion or tab item based on the hash
+function openAccordionItem(hash) {
+  if (!hash) return;
+
+  // Try to find the link that matches the hash
+  const targetLink = document.querySelector(`.accordion-button[href="#${hash}"], .nav-link[href="#${hash}"]`);
+  if (targetLink) {
+    targetLink.click(); // Programmatically click to open the item
+  }
+}

templates/block/block--expandable-content.html.twig

@@ -41,7 +41,6 @@
 
 {% extends '@boulder_base/block/styled-block.html.twig' %}
 {% block content %}
-  {{ attach_library('boulder_base/ucb-expandable-content') }}
   {% if layoutSelection == 1 %}
     <div class="horizontal-tab-accordion">
       <ul class="nav nav-tabs justify-content-center" id="ucb-horizontal-tabs{{ id }}" role="tablist">