Toggle is-visible Class to Div Next to Trigger Element (Plain JS)

Question

This is supposed to be a very simple dropdown FAQ system, I know how to do this in jQuery but I want to learn plain JS.

I just want the individual clicked triggers to toggle the is-visible class to the content divs next to the clicked trigger. Like $(this).next addClass — just in JS.

I've really tried to search for this issue but 90% that shows up is how to do it in jQuery :-p

https://jsfiddle.net/48ea3ruz/

var allTriggers = document.querySelectorAll('.faq-trigger');
 for (var i = 0; i < allTriggers.length; i++) {

 // access to individual triggers:
 var trigger = allTriggers[i];
}

var allContent = document.querySelectorAll('.faq-content');
 for (var i = 0; i < allContent.length; i++) {

// access to individual content divs:
var content = allContent[i];
}

// I don't know how to target the faq-content div next to the clicked faq-trigger
this.addEventListener('click', function() {
content.classList.toggle('is-visible');
});

Would really appreciate some advice! :-)

Answer 1

Use nextSibling, when you are iterating .faq-trigger

var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
  allTriggers[i].addEventListener('click', function() {
     this.nextSibling.classList.toggle('is-visible');
  });
}

nextSibling will also consider text-nodes, try nextElementSibling also

var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
  allTriggers[i].addEventListener('click', function() {
     this.nextElementSibling.classList.toggle('is-visible');
  });
}