$('#faq .answer').not(':first').hide(); $('#faq .question').click(function() { if($(this).next('.answer').is(':visible')) { $(this).next('.answer').slideUp(300); } else { $(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300); } });
.question { padding:5px; font-weight:bold; font-family:Arial; font-size:14px; border:1px solid #ddd; background:#eee; cursor: pointer; } .answer { padding:25px; font-family:Arial; font-size:13px; border:1px solid #ddd; }
<div id="faq"> <div class="question">Question 01</div> <div class="answer">Answer 01<br />Answer 01<br />Answer 01<br />Answer 01<br /></div> <div class="question">Question 02</div> <div class="answer">Answer 02<br />Answer 02<br />Answer 02<br />Answer 02<br /></div> <div class="question">Question 03</div> <div class="answer">Answer 03<br />Answer 03<br />Answer 03<br />Answer 03<br /></div> </div>