I am creating a series of drop-down elements, with an initially visible question and an answer that is toggled between `display: block` and `display: none` upon clicking the question. Clicking each question for its answer also causes all the other answers to become `display: none`.

The problem I'm having is to do with the if-else statement following on from when a `.question` is clicked, hide all answers that don't relate to this question. If the next answer is `display: none`, change it to `display: block`.

This next if-else statement should instruct: if the next answer is `display: block`, then change it back to `display: none`. However, while I am receiving no console errors, the if-else statement does not run at all as currently stands.

Hopefully this is another case of me being a bit thick while reading the code!

```js
function script() {
  $('.question').on('click', function() {
    $('#faqs').find('.answer').not($(this)).hide();
    if ($(this).next(".answer").css("display", "none")) {
      $(this).next(".answer").css("display", "block");
    } else if ($(this).next(".answer").css("display", "block")) {
      $(this).next(".answer").css("display", "none");
    };
  });
}

$(document).ready(script);
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="faqs">
  <div class="qna">
    <div class="question">
      <h8>
        Question 1
      </h8>
    </div>
    <div class="answer" style="display: none">
      <p>
        Answer 1
      </p>
    </div>
  </div>
  <div class="qna">
    <div class="question">
      <h8>
        Question 2
      </h8>
    </div>
    <div class="answer" style="display: none">
      <p>
        Answer 2
      </p>
    </div>
  </div>
  <div class="qna">
    <div class="question">
      <h8>
        Question 3
      </h8>
    </div>
    <div class="answer" style="display: none">
      <p>
        Answer 3
      </p>
    </div>
  </div>
</div>
```