Javascript to open content toggle?

[jasonbryanemployment]

Hey there,

I’ve got 3 layers of nested content toggles, and there is a jumplink I would link people to.

ghostfriendly com#bigbuckbunny

I would like the javascript to open the 3 layers of nested content toggles and present the user with the movie there.

I’ve been looking all over for what I need, but either I’m too much of a n00b, or I haven’t found what I’m looking for. Any help or ideas?

Thank you!

[m_hutley]

if(window.location.hash == "bigbuckbunny") {

[jasonbryanemployment]

Really? It’s that easy? The problem is that if you visit ghostfriendly.com for my example, #bigbuckbunny is nested 3 layers deep.

As is right now if I link myself using jumplinks, it scrolls to the right part on the page but nothing opens up.
-J

[PaulOB]

@jasonbryanemployment

Really? It’s that easy

The code @m_hutley posted was really a starting point

Once you have detected the #llnk in the address bar with the code @m_hutley offered you can then set about opening the required elements that will enable the destination to be shown.

As you have jquery already running I’m assuming you could just trigger a click on the 3 trigger elements to open the accordion. Add a unique id on each trigger in the html and perhaps something like this would work.

if(window.location.hash == "bigbuckbunny") {
jQuery('#tog1').trigger('click');
jQuery('#tog2').trigger('click');
jQuery('#tog3').trigger('click');
}

I called them tog1, tog2 and tog3.

The code above is untested as I’m on a mobile at the moment so can’t check properly but you should be able to make a start now.

[jasonbryanemployment]

@m_hutley

if(window.location.hash == “bigbuckbunny”) {

So far, working with my best buddy Chat-GPT, we came up with:

document.addEventListener(“DOMContentLoaded”, function() {
var hash = window.location.hash;
var contentToggle = document.getElementById(‘testone’);
if (contentToggle) {
contentToggle.classList.add(‘active’);

var toggleButton = contentToggle.querySelector('.wp-block-ub-content-

toggle-accordion-title-wrap’);
if (toggleButton) {
toggleButton.click();
}
}

if (hash === ‘#testtwo’ || hash === ‘#bigbuckbunny’) {
setTimeout(function() {
var secondContentToggle = document.getElementById(‘testtwo’);
if (secondContentToggle) {
secondContentToggle.classList.add(‘active’);

    var secondToggleButton = secondContentToggle.querySelector('.wp-

block-ub-content-toggle-accordion-title-wrap’);
if (secondToggleButton) {
secondToggleButton.click();
}
}
}, 500);
}

if (hash === ‘#bigbuckbunny’) {
setTimeout(function() {
var videoContentToggle = document.getElementById(‘bigbuckbunny’);
if (videoContentToggle) {
videoContentToggle.classList.add(‘active’);

    var videoToggleButton = videoContentToggle.querySelector('.wp-

block-ub-content-toggle-accordion-title-wrap’);
if (videoToggleButton) {
videoToggleButton.click();
}
}
}, 1000);
}
});

It all works… but working with Chat-GPT, we have not managed to get it to work with the jumplinks from the browser window and not hard-coded in the java.

Getting there! Nice to see the vision working, slowly, there are going to be thousands of jumplinks so it’s not worth it to hard code everything, duh!
-J

[jasonbryanemployment]

So far, I can open bottom-level content toggles with a hash url, but anything nested deeper than 1 layer only “cracks” open and the bottom-level content stays closed. The 3rd layer deep content “cracks” open, but only after you first open the bottom-layer and 2nd layer first to find the 3rd layer “cracked” open a slight amount.

For some reason, having a hard time yelling at Chat GPT at what I want, haha!

Here’s the code:

function findToggleById(toggleId, parentToggle) {
// Check if the parent toggle has the desired toggle ID
if (parentToggle.id === toggleId) {
return parentToggle;
}

// Check if the parent toggle has any child toggles
var childToggles = parentToggle.querySelectorAll(‘.wp-block-ub-content-toggle-accordion-child-wrap’);
if (childToggles.length > 0) {
// Recursively search for the toggle within each child toggle
for (var i = 0; i < childToggles.length; i++) {
var result = findToggleById(toggleId, childToggles[i]);
if (result) {
return result;
}
}
}

// If the toggle was not found, return null
return null;
}

document.addEventListener(“DOMContentLoaded”, function() {
var hash = window.location.hash;
var contentToggles = document.querySelectorAll(‘.wp-block-ub-content-toggle-accordion’);
if (contentToggles) {
for (var i = 0; i < contentToggles.length; i++) {
var contentToggle = contentToggles[i];
var toggleButton = contentToggle.querySelector(‘.wp-block-ub-content-toggle-accordion-title-wrap’);
if (toggleButton) {
toggleButton.addEventListener(‘click’, function(event) {
event.preventDefault();
contentToggle.classList.toggle(‘active’);
});
}

  if (contentToggle.id === hash.substr(1)) {
    // Found the desired toggle at the top level
    contentToggle.classList.add('active');
    console.log("Found top-level toggle with ID: " + hash.substr(1));
    if (toggleButton) {
      console.log("Clicked top-level toggle button with ID: " + hash.substr(1));
      toggleButton.click();
    }
  } else {
    // Search for the desired toggle within each parent toggle
    var parentToggle = contentToggle.closest('.wp-block-ub-content-toggle-accordion-child-wrap');
    while (parentToggle) {
      var toggle = findToggleById(hash.substr(1), parentToggle);
      if (toggle) {
        // Found the desired toggle within the parent toggle
        console.log("Found parent toggle with ID: " + parentToggle.id);
        parentToggle.classList.add('active');
        var parentToggleButton = parentToggle.querySelector('.wp-block-ub-content-toggle-accordion-title-wrap');
        if (parentToggleButton) {
          console.log("Clicked parent toggle button with ID: " + parentToggle.id);
          parentToggleButton.click();
        }
        toggle = toggle.closest('.wp-block-ub-content-toggle-accordion-child-wrap');
        while (toggle) {
          toggle.classList.add('active');
          toggle = toggle.closest('.wp-block-ub-content-toggle-accordion-child-wrap');
        }
        break;
      } else {
        // Keep searching within the next parent toggle
        parentToggle = parentToggle.closest('.wp-block-ub-content-toggle-accordion-child-wrap');
        if (parentToggle && parentToggle.classList.contains('active') && toggleButton) {
          console.log("Clicked parent toggle button with ID: " + parentToggle.id);
          toggleButton = parentToggle.querySelector('.wp-block-ub-content-toggle-accordion-title-wrap');
          toggleButton.click();
        }
      }
    }
  }
}

}
});