Merge pull request #1974 from alphagov/Amend-anchor-link-navigation-o…

…n-accordion Rework accordion anchor link nav to allow for colon anchors
alphagov · Mar 16, 2021 · b9ff7b4 · b9ff7b4
2 parents 96617d7 + da400ac
commit b9ff7b4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 * Remove title attribute from summary list ([PR #1973](https://github.com/alphagov/govuk_publishing_components/pull/1973))
 * Summary list changes ([PR #1971](https://github.com/alphagov/govuk_publishing_components/pull/1971))
+* Rework accordion anchor link nav to allow for colon anchors ([PR #1974](https://github.com/alphagov/govuk_publishing_components/pull/1974))
 
 ## 24.5.0
 

diff --git a/app/assets/javascripts/govuk_publishing_components/components/accordion.js b/app/assets/javascripts/govuk_publishing_components/components/accordion.js
@@ -293,8 +293,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   // Navigate to and open accordions with anchored content on page load if a hash is present
   GemAccordion.prototype.openByAnchorOnLoad = function () {
-    if (window.location.hash && this.$module.querySelector(window.location.hash)) {
-      this.openForAnchor(window.location.hash)
+    var splitHash = window.location.hash.split('#')[1]
+
+    if (window.location.hash && document.getElementById(splitHash)) {
+      this.openForAnchor(splitHash)
     }
   }
 
@@ -305,20 +307,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     links.forEach(function (link) {
       if (link.pathname === window.location.pathname) {
-        link.addEventListener('click', this.openForAnchor.bind(this, link.hash))
+        link.addEventListener('click', this.openForAnchor.bind(this, link.hash.split('#')[1]))
       }
     }.bind(this))
   }
 
   // Find the parent accordion section for the given id and open it
   GemAccordion.prototype.openForAnchor = function (hash) {
-    var target = document.querySelector(hash)
+    var target = document.getElementById(hash)
     var section = this.getContainingSection(target)
 
     this.setExpanded(true, section)
   }
 
-  // Loop through the given ids ancestors until the parent section class is found
+  // Loop through the given id's ancestors until the parent section class is found
   GemAccordion.prototype.getContainingSection = function (target) {
     while (!target.classList.contains(this.sectionClass)) {
       target = target.parentElement