Merge pull request #478 from CuBoulder/issue/403

Linking to Expandable content

CHANGELOG.md

@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ### Linking to Expandable content
+  Closes #403.
+  Enables linking to expandable content based on title of the content.
+---
+
 - ### Edge-to-edge update
   Updated the templates and some css to accommodate the new edge-to-edge option
 

boulder_base.libraries.yml

@@ -128,6 +128,8 @@ ucb-image-gallery:
 
 ucb-expandable-content:
   version: 1.x
+  js:
+    js/expandable-content.js: {}
   css:
     theme:
       css/block/expandable-content.css: {}

js/expandable-content.js

@@ -0,0 +1,28 @@
+
+(function() {
+    var accordionSection = window.location.hash;
+    var expandableLocation = document.getElementById(accordionSection.substring(1));
+    if (accordionSection.length) {
+        const expandableHeaders = expandableLocation.parentNode.parentNode.parentNode.getElementsByClassName("expandableHeaders");
+        const accordionTexts = expandableLocation.parentNode.parentNode.parentNode.getElementsByClassName("accordion-collapse");
+        for (let i = 0; i < expandableHeaders.length; i++) {
+            expandableHeaders[i].setAttribute("aria-expanded", "false")
+            expandableHeaders[i].setAttribute("aria-selected", "false")
+            expandableHeaders[i].classList.add('collapsed');
+            expandableHeaders[i].classList.remove("active");
+          }
+          for (let i = 0; i < accordionTexts.length; i++) {
+            accordionTexts[i].classList.remove('show');
+          }
+       expandableLocation.classList.remove('collapsed');
+       expandableLocation.classList.add('active');
+       expandableLocation.setAttribute("aria-expanded", "true");
+       expandableLocation.setAttribute("aria-selected", "true");
+       const accordionDiv = expandableLocation.parentNode.parentNode.getElementsByClassName("accordion-collapse");
+          if(accordionDiv.length) {
+       accordionDiv[0].classList.add("show");
+
+          }
+    }
+
+ })();

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

@@ -23,11 +23,13 @@
 {% set accordianContent %}
 <div class="accordion accordion-flush" id="ucb-accordion{{ id }}">
 	{% for key, item in entity.field_expandable_content_copy %}{% set itemExpanded = loop.first and (layoutSelection != 0 or entity.field_expandable_content_open.value) %}
+
 		<div class="accordion-item tab-content">
 			<h2 class="accordion-header" id="ucb-accordion{{ id }}-title{{ loop.index }}">
-				<button class="accordion-button{{ not itemExpanded ? ' collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#ucb-accordion{{ id }}-content{{ loop.index }}" aria-expanded="{{ itemExpanded ? 'true' : 'false' }}" aria-controls="ucb-accordion{{ id }}-content{{ loop.index }}">
+			{% set expandableHeaderID = item.entity.field_expandable_content_title|view %}
+				<a id = "{{ item.entity.field_expandable_content_title.value|render|lower|replace({' ': "-"}) }}" class="accordion-button{{ not itemExpanded ? ' collapsed' }} expandableHeaders" type="button" data-bs-toggle="collapse" data-bs-target="#ucb-accordion{{ id }}-content{{ loop.index }}" aria-expanded="{{ itemExpanded ? 'true' : 'false' }}" aria-controls="ucb-accordion{{ id }}-content{{ loop.index }}">
 					{{ item.entity.field_expandable_content_title|view }}
-				</button>
+				</a>
 			</h2>
 			<div id="ucb-accordion{{ id }}-content{{ loop.index }}" class="accordion-collapse collapse tab-pane fade{{ itemExpanded ? ' show active' }}" aria-labelledby="ucb-accordion{{ id }}-title{{ loop.index }}" data-bs-parent="#ucb-accordion{{ id }}">
 				<div class="accordion-body">
@@ -51,22 +53,22 @@
 				<ul class="nav nav-tabs justify-content-center" id="ucb-horizontal-tabs{{ id }}" role="tablist">
 					{% for key, item in entity.field_expandable_content_copy %}{% set itemExpanded = loop.first %}
 						<li class="nav-item" role="presentation">
-							<button class="nav-link horizontal-tab-link{{ itemExpanded ? ' active' }}" data-bs-toggle="tab" data-bs-target="#ucb-accordion{{ id }}-content{{ loop.index }}" type="button" role="tab" aria-controls="ucb-accordion{{ id }}-content{{ loop.index }}" aria-selected="{{ itemExpanded ? 'true' : 'false' }}">{{ item.entity.field_expandable_content_title|view }}</button>
+							<a id = "{{ item.entity.field_expandable_content_title.value|render|lower|replace({' ': "-"}) }}" class="nav-link horizontal-tab-link{{ itemExpanded ? ' active' }} expandableHeaders" data-bs-toggle="tab" data-bs-target="#ucb-accordion{{ id }}-content{{ loop.index }}" type="button" role="tab" aria-controls="ucb-accordion{{ id }}-content{{ loop.index }}" aria-selected="{{ itemExpanded ? 'true' : 'false' }}">{{ item.entity.field_expandable_content_title|view }}</a>
 						</li>
 					{% endfor %}
 				</ul>
-				<div class="horizontal-tab-content">
+				<div class="horizontal-tab-content ">
 					{{ accordianContent }}
 				</div>
 			</div>
 		{% elseif layoutSelection == 2 %}
 			<div class="vertical-tab-accordion d-flex align-items-stretch">
 				<div class="vertical-tabs nav flex-column nav-pills" id="ucb-vertical-tabs{{ id }}" role="tablist" aria-orientation="vertical">
 					{% for key, item in entity.field_expandable_content_copy %}{% set itemExpanded = loop.first %}
-						<button class="nav-link vertical-tab-link{{ itemExpanded ? ' active' }}" data-bs-toggle="pill" data-bs-target="#ucb-accordion{{ id }}-content{{ loop.index }}" type="button" role="tab" aria-controls="ucb-accordion{{ id }}-content{{ loop.index }}" aria-selected="{{ itemExpanded ? 'true' : 'false' }}">{{ item.entity.field_expandable_content_title|view }}</button>
+						<a id = "{{ item.entity.field_expandable_content_title.value|render|lower|replace({' ': "-"}) }}" class="nav-link vertical-tab-link{{ itemExpanded ? ' active' }} expandableHeaders" data-bs-toggle="pill" data-bs-target="#ucb-accordion{{ id }}-content{{ loop.index }}" type="button" role="tab" aria-controls="ucb-accordion{{ id }}-content{{ loop.index }}" aria-selected="{{ itemExpanded ? 'true' : 'false' }}">{{ item.entity.field_expandable_content_title|view }}</a>
 					{% endfor %}
 				</div>
-				<div class="vertical-tab-content">
+				<div class="vertical-tab-content ">
 					{{ accordianContent }}
 				</div>
 			</div>