クリックで開閉するアコーディオンパネル
Result
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>