Result
http://jsfiddle.net/kachibito/F9EN9/82/embedded/result,js,css,html
jQuery
//最初以外を隠す $('#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); } });
css
.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; }
html
<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>