Open accordions using URL hashes

_includes/components/accordion.html

@@ -1,12 +1,15 @@
 {% assign slug = include.title | slugify %}
+{% if include.slug %}
+    {% assign slug = include.slug %}
+{% endif %}
 <div class="accordion default" id="accordion-{{ slug }}">
-    <div class="accordion-item">
-      <p class="accordion-header" id="heading-{{ slug }}">
-        <button class="accordion-button {% unless(include.open) %}collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ slug }}" aria-expanded="{% if(include.open) %}true{% else %}false{% endif %}" aria-controls="collapse-{{ slug }}">
+    <div class="accordion-item" id="accordion-item-{{ slug }}">
+      <p class="accordion-header" id="accordion-header-{{ slug }}">
+        <button class="accordion-button {% unless(include.open) %}collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ slug }}" aria-expanded="{% if(include.open) %}true{% else %}false{% endif %}" aria-controls="{{ slug }}">
             {{ include.title }}
         </button>
         </p>
-        <div id="collapse-{{ slug }}" class="accordion-collapse collapse {% if(include.open) %}show{% endif %}" aria-labelledby="heading-{{ slug }}" data-bs-parent="#accordion-{{ slug }}">
+        <div id="{{ slug }}" class="accordion-collapse collapse {% if(include.open) %}show{% endif %}" aria-labelledby="heading-{{ slug }}" data-bs-parent="#accordion-{{ slug }}">
             <div class="accordion-body">
                 {{ include.content }}
             </div>

_includes/scripts.html

@@ -1,5 +1,6 @@
 <script src="/assets/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 <script src="/assets/js/toc-scroll.js" async></script>
 <script src="/assets/js/external-links.js" defer></script>
+<script src="/assets/js/hashes.js"></script>
 
 {% include google_analytics.html %}

about/faq.md

@@ -18,7 +18,7 @@ menus:
 <!-- End: Info box -->
 
 <!-- START: Accordions Each h2 below will be a separate accordion. -->
-<div class="accordion default border-top-gradient-software-blue-green border-bottom-gradient-software-blue-green">
+<div class="border-top-gradient-software-blue-green border-bottom-gradient-software-blue-green">
   {% capture accordionContent %}
 If you’re new to GitHub and open source in general, figuring out how to get set up can be a challenge. You may want to read through the GitHub Help pages on [setting up and managing your GitHub profile](https://support.github.com/features/account).
 

assets/js/hashes.js

@@ -0,0 +1,43 @@
+window.addEventListener('load', function() {
+    setupHashTrigger();
+    setupHashUpdates();
+
+    function setupHashTrigger() {
+        if (!window.location.hash) {
+            return;
+        }
+        const element = document.querySelector(window.location.hash);
+        if (!element) {
+            return;
+        }
+        if (element.className.indexOf('accordion-collapse') > -1) {
+            new bootstrap.Collapse(element, { show: true });
+            recordAccordionOpen(element);
+        }
+    }
+
+    function setupHashUpdates() {
+        const accordionElements = document.querySelectorAll('.accordion');
+        accordionElements.forEach(function(element) {
+            element.addEventListener('show.bs.collapse', function(event) {
+                const hash = '#' + event.target.id;
+                window.history.replaceState('', '', hash);
+                recordAccordionOpen(element);
+            });
+
+            element.addEventListener('hide.bs.collapse', function(event) {
+                const hash = '#' + event.target.id;
+                if (window.location.hash == hash) {
+                    window.history.replaceState('', '', window.location.pathname + window.location.search);
+                }
+            });
+
+        });
+    }
+
+    function recordAccordionOpen(element) {
+        if (typeof _paq !== 'undefined') {
+          _paq.push(['trackEvent', 'Accordion', 'Opened', element.id]);
+        }
+    }
+});

assets/js/toc-scroll.js

@@ -1,9 +1,11 @@
 window.addEventListener('load', function() {
-    const headings = document.querySelectorAll('h2[id], h3[id]'),
-      jumpLinks = document.querySelectorAll('.jump-links a'),
+    const headings = Array.from(
+      document.querySelectorAll('h2[id], h3[id]')
+    ).filter(element => !element.closest('.accordion'));
+    const jumpLinks = document.querySelectorAll('.jump-links a'),
       jumpLinkLookup = {},
       jumpLinkTargetLookup = {};
-
+        
     // create jumplink/heading lookups
     for (var i = 0; i < jumpLinks.length; i++) {
       const element = jumpLinks[i];