クリックで開閉するアコーディオンパネル

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>​