多个下拉窗口，打开另一个时会自动关闭

Question

I have an example of what I'm working on at JSFiddle so you can get an idea of what I'm working on looks like. I'm trying to find a way to make the drop-down that's opened auto close when opening another. All the solutions I find either keep anything from opening or opening & closing everything at the same time. Keep in mind on the final page their will be around 30 of these drop-downs.

Here is the jquery code as is.

    $(document).ready(function () {
        $(".answer").hide();

        $(".question").click(function () {
            $(this).next(".answer").slideToggle(500);
        });
    });

The html is set up like this.

<p class="question">The question.</p>
<div class="answer">The answer.</div>
<p class="question">The question2.</p>
<div class="answer">The answer2.</div>
<p class="question">The question3.</p>
<div class="answer">The answer3.</div>
<p class="question">The question4.</p>
<div class="answer">The answer4.</div>

I'm very new to jquery & I'm doing my best here. Ive been working at this all day and only come asking for help as a last resort. If more info is needed Ill do my best to provide. Any help is greatly appreciated!

Answer 1

Close all open answers only if the clicked answer isn't visible: http://jsfiddle.net/zFuUp/2/

$(document).ready(function() {
    $(".answer").hide();
    //toggle the componenet with class msg_body
    $(".question").click(function() {
        // Check if we are closing us
        if( ! $(this).next('.answer').is(':visible') )
            $('.answer').slideUp(500)

        // Open us
        $(this).next(".answer").slideToggle(500);
    });
});