Multiple Toggle button on single page

Hi Scott,

Let's modify the vanilla JS provided a bit.

We can use nextSibling with this.

Try this one.

var toggleBtn = document.querySelector('.toggle-heading');
var toggleTgt = document.querySelector('.toggle-heading').nextSibling;

toggleBtn.addEventListener("click", function() {
  toggleTgt.classList.toggle('show-text');
});

Hi Elvin!

Thanks for the reply but it's not working as expected. The first instance of the toggle button is working perfectly but the subsequent ones are not. Any other ideas? I was trying to avoid loading jquery if I can.

Thanks so much for this above and beyond help!
Scott

Thanks for the reply but it’s not working as expected. The first instance of the toggle button is working perfectly but the subsequent ones are not. Any other ideas? I was trying to avoid loading jquery if I can.

Yeah that was the goal. The script is vanilla JS. We're actually trying to avoid jquery as well. :)

I think we need to reiterate making of listeners per btn.

Example:

var toggleBtn = document.querySelectorAll('.toggle-heading');

for(i=0; i<toggleBtn.length; i++){
  var toggleTgt = toggleBtn[i].nextSibling;
  toggleBtn[i].addEventListener("click", function() {
    toggleTgt.classList.toggle('show-text');
  });
}

Good Morning! That didn't work on any of the buttons unfortunately.

Is there any drawback to doing a more inline solution using something like this and changing the ID for each block: https://www.encodedna.com/javascript/how-to-show-hide-or-toggle-a-div-element-using-javascript.htm ?

Thanks again for your help!

Having an ID means you'll have to make a script for each one.

Try this:

var toggleBtn = document.querySelectorAll('.toggle-heading');

toggleBtn.forEach(item => {
  item.addEventListener('click', event => {
    var toggleTgt = item.nextElementSibling;
    toggleTgt.classList.toggle('show-text');
  })
});

Note: Make sure the class is on the wrapper. not the actual button.

We have a winner! Works just like I wanted. Thanks so much! This is why GP is the best theme on the planet with the best support!

Nice one. Glad you got it sorted. No problem. :D