[jQuery] Automatically slide all divs up when one slides down
So I have the following code and it works great. I am just curious how I can adapt it in order to only have 1 answer visible at one time. If once item is clicked, then on click of the other item, the last one automatically slides up. How would one go about doing this?
JS:
$(document).ready(function(){
$('.qa-list div').each(function(i) {
$(this).children('.answer').slideUp();
});
$(".question").click(function(){
var $this = $(this);
if( $<a href="http://this.is">this.is</a>('.question') ) {
$this.children('.answer').slideDown();
$this.removeClass('question');
$this.addClass('question-answer');
}
else {
$this.children('.answer').slideUp();
$this.removeClass('question-answer');
$this.addClass('question');
}
//return false;
});
});
CODE:
<div class="qa-list">
<div class="question">Question<br />
<span class="answer">this is the answer</span></div>
<div class="question">Question<br />
<span class="answer">this is the answer</span></div>
</div>
Thanks
Brian