Problems with else-if statement on related dropdown elements

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 HTML is here:

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

and the jQuery is here:

    function script() {
        //Question Dropdowns
        $('.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);

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

This next else-if 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 else-if statement does not run at all as currently stands.

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