Open accordion sections with anchor links

Developing with Concrete
1

Hello everyone,

I’m looking for a solution regarding following issue:
On the current website I’m building, there’s a sub page with an accordion which has a few sections. My goal is to create anchor links to each section of the accordion, that’s not where my problem is. What I want to happen is for the accordion to open the right section when the anchor link is used, even when opened from an external website. Right now the page scrolls down to the accordion itself and just stops there.

Does anyone know how to do what I tried to explain?

Concrete Core Version - 9.2.1
Concrete Version Installed - 9.2.1

PHP Version 8.3.8-nmm1

2

I think you would have to add some JS

Here’s how you can do it:

  1. Set up the Accordion: First, create the accordion block template
  2. Add IDs to Each Accordion Item: Ensure each accordion item has a unique ID that can be referenced by the anchor link, using php
  3. Use Anchor Links with IDs: Create anchor links that point to these IDs.
  4. Write JavaScript to Handle the Anchor Links: Use JavaScript to handle the opening of accordion items when an anchor link is clicked.

Because concrete accordion is bootstrap it adds ID’s

<div class="accordion-item">
            <h2 class="accordion-header">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse202">
                    Panel 1</button>
            </h2>
            <div id="collapse202" class="accordion-collapse collapse " data-bs-parent="#accordion999">
                <div class="accordion-body">                   
                </div>
            </div>
        </div>

so you should be able to use something like this

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Function to open accordion based on URL hash
    function openAccordionByHash() {
      const hash = window.location.hash; // Get the hash from the URL
      if (hash) {
        const target = document.querySelector(hash); // Find the element with the ID matching the hash
        if (target && target.classList.contains('accordion-collapse')) { // Check if the target is an accordion-collapse
          const collapse = new bootstrap.Collapse(target, {
            toggle: false // Prevents immediate toggling
          });
          collapse.show(); // Show the accordion panel
          // Optionally, scroll to the opened accordion item
          setTimeout(() => target.scrollIntoView({ behavior: 'smooth' }), 300);
        }
      }
    }

    // Check if there's a hash on page load and open the corresponding accordion
    openAccordionByHash();

    // Add event listener to update hash on accordion toggle
    const accordionToggles = document.querySelectorAll('.accordion-button');
    accordionToggles.forEach(toggle => {
      toggle.addEventListener('click', function () {
        const collapseId = this.getAttribute('data-bs-target'); // Get the collapse target ID
        if (collapseId) {
          window.location.hash = collapseId; // Update the URL hash
        }
      });
    });
  });
</script>

the links would be

<a href="webpage.html#collapse202">Open Panel 1 on Another Page</a>
<a href="webpage.html#collapse203">Open Panel 2 on Another Page</a>

this is not tested but it gives you the write idea.

1 Like
3

I’m also a fan of rolling your own solution. But in case you’re not, a ready-made solution is Magic Tabs. Here’s the documentation about linking to a specific tab: https://c5magic.co.uk/addons/magic-tabs/jump-and-linking-specific-tabs/?tab=jl_magic_tabs__gix1

1 Like
4

This is really helpful. I’ll give it a try and then write a feedback. Thank you!

5

Thanks for the link. I also prefer to at least give it a try by myself before using ready-made solutions :blush: