Jquery FAQ function toggling not working as I want it to

Question

PSL Answered it for me, thanks man! :)

So I got this code:

$(document).ready(function () {

$('.faqs .answer').hide();
$('.faqs .question').click(function(){
    $('.faqs .answer').slideUp('normal');
    $(this).next().slideDown('normal');
}); 

});

And it's working fine, but the problem is that when I click the same FAQ (the FAQ that you just opened) it will toggle it, so it will go up and down, offcourse that's what my code says to do so, is there any way I can stop this from happening? I am using the same Class names, which simply is question and answer. So what I want it to do is that it should only go up whenever you click the slided down div.

<div class="faqs">
    <div class="question">Can you help me?</div>
    <div class="answer">I hope so</div>
</div>

Thanks already, Jordy

Answer 1

You could use not to exclude the current elements target, which still sliding it down:

$('.faqs .question').click(function(){
    var $target = $(this).next();
    $('.faqs .answer:visible').not($target.slideDown('normal')).slideUp('normal');
});