Toggle is-visible Klasse zu Div Neben Trigger-Element (Plain JS)

Question

Das soll ein sehr einfaches Dropdown-FAQ-System sein, ich weiß, wie man das in jQuery macht, aber ich möchte einfach JS lernen.

Ich möchte nur die einzelnen angeklickte Trigger, um die Is-Visible-Klasse auf die Content-Divs nächste auf den angeklickten Trigger umschalten. Wie $ (this) .next addClass - nur in JS.

Ich habe wirklich für dieses Problem zu suchen versucht, aber 90%, das ist zeigt sich, wie es in jQuery zu tun :-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'); 
}); 

wirklich einige Ratschläge zu schätzen wissen! :-)

Answer 1

Verwenden nextSibling, wenn Sie .faq-trigger iterieren

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 auch Text-Knoten betrachten, versuchen nextElementSibling auch

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'); 
    }); 
}