Using the nextSiblingElement in forEach function after clicking again is not working

Question

I am practicing making FAQ accordion, I am able to show the answer after

clicking the question but when I am clicking again to hide the answer it is not working.

const questions = document.querySelectorAll('.questions')
const quesArr = Array.from(questions);

quesArr.forEach((ques) => {
  ques.addEventListener('click', (e) => {
    const next = ques.nextElementSibling;
    hidingAndShowing(ques, next)
  })
})

const hidingAndShowing = (ques, next) => {
  if (next.style.display = 'none') {
    next.style.display = 'block'
  } else if (next.style.display = 'block') {
    next.style.display = 'none'
  }
}

<div class="faqAccordian">
  <div class="acc-1 acc">
    <p class="questions ques-1">what is this?</p>

    <p class="answers">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, ipsam velit aut fugiat sit facilis quibusdam illo cupiditate dolorem eius repudiandae sapiente amet obcaecati animi neque odio cumque, quas mollitia.
    </p>
  </div>
  <div class="acc-2 acc">
    <p class="questions ques-2">what does it mean?</p>

    <p class="answers">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat ad tempore quis! Delectus, dolore. Dolorum in distinctio illo similique perspiciatis quia! Error porro id similique, dicta unde blanditiis ducimus laborum.
    </p>
  </div>
  <div class="acc-3 acc">
    <p class="questions ques-3">what does it do?</p>

    <p class="answers">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus ad reiciendis dolores? Similique numquam est facilis ullam repellendus repellat cum dicta quae fugit. Cupiditate fuga, eum fugiat doloribus quia nisi.
    </p>
  </div>
  <div class="acc-4 acc">
    <p class="questions ques-4">what does it want to do?</p>

    <p class="answers">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos perferendis placeat corrupti nam quibusdam est impedit sed optio quia repellendus laborum, ipsa error sapiente culpa consequuntur quaerat nobis incidunt quae.
    </p>
  </div>
</div>

It is showing the nextElementSibling when clicking the first time but on the second time it does not do anything not even throw the error.

You don't need `Array.from(...)`. The [`NodeList`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/) from `.querySelectorAll()` already has a `.forEach()` method -> `questions.forEach(...)` — Andreas, Aug 02 '22 at 17:00

score 0 · Accepted Answer · answered Aug 02 '22 at 18:00

The problem is with the condition where you are using if (next.style.display = 'none') {}.

Technically there are two problems, first is next.style.display which gives nothing so instead of that use getComputedStyle function to get the value of any property in this case 'display', thats because Computed style contains all the CSS properties set to an element. Even if do not set a property to an element. You will still find that property in the computed styles.

Second is a minor typo in the if condition = which should be ==

Working Example:

const questions = document.querySelectorAll('.questions')
const quesArr = Array.from(questions);

questions.forEach((ques) => {
  ques.addEventListener('click', (e) => {
    const next = ques.nextElementSibling;
    hidingAndShowing(ques, next)
  })
})

const hidingAndShowing = (ques, next) => {
  if (window.getComputedStyle(next).display == 'none') {
    next.style.display = 'block'
  } else if (window.getComputedStyle(next).display == 'block') {
    next.style.display = 'none'
  }
}

<div class="faqAccordian">
  <div class="acc-1 acc">
    <p class="questions ques-1">what is this?</p>

    <p class="answers">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, ipsam velit aut fugiat sit facilis quibusdam illo cupiditate dolorem eius repudiandae sapiente amet obcaecati animi neque odio cumque, quas mollitia.
    </p>
  </div>
  <div class="acc-2 acc">
    <p class="questions ques-2">what does it mean?</p>

    <p class="answers">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat ad tempore quis! Delectus, dolore. Dolorum in distinctio illo similique perspiciatis quia! Error porro id similique, dicta unde blanditiis ducimus laborum.
    </p>
  </div>
  <div class="acc-3 acc">
    <p class="questions ques-3">what does it do?</p>

    <p class="answers">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus ad reiciendis dolores? Similique numquam est facilis ullam repellendus repellat cum dicta quae fugit. Cupiditate fuga, eum fugiat doloribus quia nisi.
    </p>
  </div>
  <div class="acc-4 acc">
    <p class="questions ques-4">what does it want to do?</p>

    <p class="answers">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos perferendis placeat corrupti nam quibusdam est impedit sed optio quia repellendus laborum, ipsa error sapiente culpa consequuntur quaerat nobis incidunt quae.
    </p>
  </div>
</div>

Thank you for the help it worked like a charm I was frustrated over it for 2 days but I can progress now. — Muhammad Kaleem Raza, Aug 03 '22 at 07:23

Roko C. Buljan · Answer 2 · 2022-08-02T18:30:50.647

I would just use the Details Element.

/* see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details */

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: .5em .5em 0;
}

summary {
  font-weight: bold;
  margin: -.5em -.5em 0;
  padding: .5em;
}

details[open] {
  padding: .5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: .5em;
}

<details>
  <summary>what is this?</summary>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, ipsam velit aut fugiat sit facilis quibusdam illo cupiditate dolorem eius repudiandae sapiente amet obcaecati animi neque odio cumque, quas mollitia.
</details>

<details>
  <summary>what does it mean?</summary>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat ad tempore quis! Delectus, dolore. Dolorum in distinctio illo similique perspiciatis quia! Error porro id similique, dicta unde blanditiis ducimus laborum.
</details>

<details>
  <summary>what does it do?</summary>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus ad reiciendis dolores? Similique numquam est facilis ullam repellendus repellat cum dicta quae fugit. Cupiditate fuga, eum fugiat doloribus quia nisi.
</details>

<details>
  <summary>what does it want to do?</summary>
  orem, ipsum dolor sit amet consectetur adipisicing elit. Quos perferendis placeat corrupti nam quibusdam est impedit sed optio quia repellendus laborum, ipsa error sapiente culpa consequuntur quaerat nobis incidunt quae.
</details>

Otherwise, if you want to target the next immediate sibling you could use the Adjacent Sibling Combinator + in CSS, and use JS purely to toggle a class on the "button" element:

document.querySelectorAll(".questions").forEach(elQuestion => {
  elQuestion.addEventListener("click", () => {
    elQuestion.classList.toggle("is-active");
  });
});

/* Hide answers by default */
.answers {
  display: none;
}

/* Show answer */
.questions.is-active + .answers {
  display: block;
}

<div class="faqAccordian">
  <div class="acc">
    <p class="questions">what is this?</p>
    <p class="answers">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus, ipsam velit aut fugiat sit facilis quibusdam illo cupiditate dolorem eius repudiandae sapiente amet obcaecati animi neque odio cumque, quas mollitia.
    </p>
  </div>
  <div class="acc">
    <p class="questions">what does it mean?</p>
    <p class="answers">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat ad tempore quis! Delectus, dolore. Dolorum in distinctio illo similique perspiciatis quia! Error porro id similique, dicta unde blanditiis ducimus laborum.
    </p>
  </div>
  <div class="acc">
    <p class="questions">what does it do?</p>
    <p class="answers">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus ad reiciendis dolores? Similique numquam est facilis ullam repellendus repellat cum dicta quae fugit. Cupiditate fuga, eum fugiat doloribus quia nisi.
    </p>
  </div>
  <div class="acc">
    <p class="questions">what does it want to do?</p>
    <p class="answers">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos perferendis placeat corrupti nam quibusdam est impedit sed optio quia repellendus laborum, ipsa error sapiente culpa consequuntur quaerat nobis incidunt quae.
    </p>
  </div>
</div>

To give you some more ideas see: toggle show/hide div with button?

Using the nextSiblingElement in forEach function after clicking again is not working

2 Answers2