Q:

How to get FAQ on a website working without using classnames?

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 a p 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>

A:

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>

