如何在不使用类名的情况下在网站上获取常见问题解答？

Question

I'm trying to fix this accordion on a FAQ page. The question should open up the p tag with the answer when you click the h3 tag. Unfortunately it is not possible to use any class name or anything like that. Our client can now simply add a h3 and ap tag to create a new question. I'm trying to open up one question a the time. Somebody who can help me with this?

<style>
.faq h3{ background: #e2001a; color: #fff; padding: 5px 10px; cursor: 
pointer; user-select: none;}


.show {
display: block;
}
</style>

<div class="faq">
<h1>FAQ</h1>

<h3>Question 1</h3>
 <p>Lorem ipsum</p>

 <h3>Question 2</h3>
 <p>Lorem ipsum</p>

 <h3>Question 3</h3>
 <p>Lorem ipsum</p>

<script>
var acc = document.getElementsByClassName(".faq h3");
var panel = document.getElementsByClassName(".faq p");

for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
    var setClasses = !this.classList.contains('active');
    setClass(acc, 'active', 'remove');
    setClass(panel, 'show', 'remove');

    if (setClasses) {
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}
}

 function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
    els[i].classList[fnName](className);
}
}
</script>

Answer 1

Use nextElementSibling to target the paragraph of each clicked h3 .

 // Grab all the h3s and paras const h3s = document.querySelectorAll('h3'); const paras = document.querySelectorAll('p'); // Add click listeners to each h3 h3s.forEach(h3 => h3.addEventListener('click', handleClick, false)); function handleClick() { // Grab the nextElementSibling from the clicked element const { nextElementSibling: next } = this; // Remove all `show` classes from the paras paras.forEach(para => para.classList.remove('show')); // Add a show class to the sibling para next.classList.toggle('show'); }

 p { visibility: hidden; height: 0px; } .show { visibility: visible; height: auto; }

 <div class="faq"> <h1>FAQ</h1> <h3>Question 1</h3> <p>Lorem ipsum</p> <h3>Question 2</h3> <p>Lorem ipsum</p> <h3>Question 3</h3> <p>Lorem ipsum</p> </div>

Answer 2

There are some small mistakes in your selectors. In getElementsByClassName('name') the name has to be a simple string (the class name ), but you can look for child nodes with getElementsByTagName('name') - for example.

If you want to use CSS selectors use querySelectorAll instead:

var acc = document.querySelectorAll("div.faq > h3");
var panel = document.querySelectorAll('div.faq > p');

This example is using getElementsByClassName and getElementsByTagName:

 var faq = document.getElementsByClassName("faq")[0]; var acc = faq.getElementsByTagName('h3'); var panel = faq.getElementsByTagName('p'); for (var i = 0; i < acc.length; i++) { acc[i].onclick = function() { var setClasses = !this.classList.contains("active"); setClass(acc, "active", "remove"); setClass(panel, "show", "remove"); if (setClasses) { this.classList.toggle("active"); this.nextElementSibling.classList.toggle("show"); } }; } function setClass(els, className, fnName) { for (var i = 0; i < els.length; i++) { els[i].classList[fnName](className); } }

 .faq h3 { background: #e2001a; color: #fff; padding: 5px 10px; cursor: pointer; user-select: none; } .faq p { display: none; } .faq p.show { display: block; }

 <div class="faq"> <h1>FAQ</h1> <h3>Question 1</h3> <p>Lorem ipsum</p> <h3>Question 2</h3> <p>Lorem ipsum</p> <h3>Question 3</h3> <p>Lorem ipsum</p> </div>