How to: Open a nestable tab as well as accordion with an anchor link?

How To
1

Hey guys,

I’m hoping to pick your brains :brain:

I’m using Nestable Tabs in my layout and each tab also has an Accordion element.

I’m trying to create an anchor link that would open the particular tab as well as the targeted accordion within that particular tab.

My simplified HTML looks like this:

<!-- Tabs -->
<div class="xyz-tab-menu">
  <div id="tab-social" class="xyz-tab-button brx-open">Tab Social</div>
  <div id="tab-email" class="xyz-tab-button">Tab Email</a></div>
</div>
<!-- The class .brx-open is added to an opened tab (active tab), in this case this means the #tab-social is an active tab -->

<!-- Tabs Content -->
<div id="xyz-tabs-content" class="xyz-container-tab-content">

  <!-- Tab Social pane -->
  <div id="xyz-tab-pane" class="brxe-block xyz-tab-pane tab-pane brx-open">

      <!-- Accordions inside Tab Social (#tab-social) -->
      <div id="tab-social-accordion" class="brxe-accordion-nested">

        <!-- The first accordion inside the #tab-social-accordion -->
        <div id="tab-social-accord-1" class="brxe-block listening brx-open">
          <!-- The class .brx-open is added to an opened accordion (active accordion), in this case this means the #tab-social-accord-1 is an active accordion -->
          <h3>Social Accordion 1</h3>
          <div>
            <!-- Accordion content goes here -->
          </div>
        </div>

        <div id="tab-social-accord-2" class="brxe-block listening">
          <h3>Social Accordion 2</h3>
          <div>
            <!-- Accordion content goes here -->
          </div>
        </div>

      </div>
   </div>

   <!-- Tab Email pane -->
   <div id="xyz-tab-pane" class="brxe-block xyz-tab-pane tab-pane">

      <!-- Accordions inside Tab Email (#tab-email) -->
      <div id="tab-email-accordion" class="brxe-accordion-nested">

        <!-- The first accordion inside the #tab-email-accordion -->
        <div id="tab-email-accord-1" class="brxe-block listening">
          <h3>Email Accordion 1</h3>
          <div>
            <!-- Accordion content goes here -->
          </div>
        </div>

        <div id="tab-email-accord-2" class="brxe-block listening">
          <h3>Email Accordion 2</h3>
          <div>
            <!-- Accordion content goes here -->
          </div>
        </div>

      </div>
   </div>

</div>

Currently from this code above, the first Tab #tab-social is opened and active and inside this tab, the first accordion #tab-social-accord-1 is opened and active.

I need to create an anchor link that would open and activate tabs and accordions within the tabs.

For example, I would like to create and anchor link with URL #open-tab-social-activate-accordion-2

This link would open/activate the first tab #tab-social and open/activate the second accordion #tab-social-accord-2.

If I created an anchor with URL #open-tab-email-activate-accordion-1, this click would open/activate the second tab #tab-email and open/activate the first accordion #tab-email-accord-1.

I’m trying to use jQuery in this case:

jQuery(document).ready(function($) {
    // Function to open/activate tab and accordion based on URL fragment identifier
    function openTabAndAccordionFromHash() {
        var hash = window.location.hash;
        if (hash) {
            var hashParts = hash.split("-");
            if (hashParts.length === 5 && hashParts[0] === "#open" && hashParts[4] === "accordion") {
                var tabId = "#tab-" + hashParts[2];
                var accordionId = "#tab-" + hashParts[2] + "-accord-" + hashParts[5];
                $(tabId).addClass("brx-open");
                $(accordionId).addClass("brx-open");
            }
        }
    }

    // Listen for changes in the URL fragment identifier
    $(window).on("hashchange", openTabAndAccordionFromHash);

    // Call the function on page load to handle any initial fragment identifier
    openTabAndAccordionFromHash();
});

This code should listen for changes in the URL fragment identifier and parse it to determine which tab and accordion to open/activate.

Then I create anchors like #open-tab-social-activate-accordion-2 or #open-tab-email-activate-accordion-1 but that just doesn’t seem to work.

Would you have any ideas?

Jo