Add functionality to Accordions paragraph

[danahertzberg]

Requirements:

• Ability to link to a specific accordion via URL
• Specified accordion should be expanded
• Page should scroll to accordion's location

Notes: If I recall correctly, we (developers, not me lol) could implement functionality where if one accordion is open, it appends the ID to the URL. And if multiple accordions were open, no ID would be added. Need to determine best functionality for the user.

From Chris: Go here: https://review.digital.arizona.edu/arizona-bootstrap/feature/93-chris/docs/0.0/components/collapse/#ex2_headingTwo

Add to console: if (location.hash === '#ex2_headingTwo') { var target = $(location.hash).find( '[data-toggle="collapse"]' ).attr('data-target'); $(target).collapse('show'); }

Dependent on AZ Digital's review/edits and approval these requirements

[trackleft]

This would actually be a fairly easy thing

document.addEventListener("DOMContentLoaded", () => {
  // Function to handle accordion based on hash
  const handleAccordion = (hash) => {
    if (hash) {
      const $targetAccordion = jQuery(hash);
      if ($targetAccordion.length) {
        $targetAccordion.collapse("show");
        window.location.hash = hash;
        history.pushState(null, null, hash);
      }
    }
  };

  // Check for hash on initial load
  handleAccordion(window.location.hash);

  // Add an event listener to handle clicks on anchor links
  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
    anchor.addEventListener("click", function (e) {
      e.preventDefault();

      // Extract the hash from the anchor link and handle the accordion
      const hash = this.getAttribute("href");
      handleAccordion(hash);
    });
  });
});

[danahertzberg]

@trackleft Go for it!

[trackleft]

Improved by #3219