Question

I have the following code:

<div class="faq">
<h1 class="question">Question</h1>
<p class="answer">Answer</p>
</div>

<div class="faq">
<h1 class="question"> Question </h1>
<p class="answer">Answer</p>
</div>

<div class="faq">
<h1 class="question"> Question </h1>
<p class="answer">Answer</p>
</div>

And I like to click on the h1 to expand the answer. the <p> tag is set to display:none, but it’s the jquery which is bugging me. Exact requirements:

• On click of an h1, the corresponding answer should open
• On click of another h1, other question answers should close, and the corresponding answer should open
• On click of an h1 while that answer is open, the answer should close.

I’ve tried the following:

jQuery(".faq > h1").click(function () { 
jQuery(this).siblings().hide();
jQuery(this).closest(".question").children("p").toggle("slow");

});

}); 

Almost does the trick, but on click of the currently open question, it closes and re-opens which looks verry buggy.

How can I fix this?

Answer 1

jQuery(".faq > h1").on('click',
function() {
    var $sib = jQuery(' + .answer', this);
    jQuery('.answer:visible').not($sib).hide('fast');
    if($sib.is(':visible')) $sib.hide('slow'); else $sib.show('slow');
});

DEMO