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

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.

Answer

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>