「Q＆A」などでよく使われる、クリックすると詳細が表示される、アコーディオンメニュー。この記事では、そのアコーディオンメニューを、jQueryのslideToggleというメソッドを使って作成する方法をご紹介します。

１、slideToggleの使用例　まずはjsの記述について

<script>
$(function($){
$('ul.qa li .question').click(function(){
$(this).toggleClass('open');
$(this).next('answer').slideToggle(150);
});
});
</script>

２、次は関連するHTMLの書き方例

<ul class="qa">
<li>
<div class="question"><span>Q.</span>お申し込み方法は？</div>
<div class="answer"><span>A.</span>クレジットカード（ご本人名義）でのご精算となります。デビットカード・プリペイドカード・現金でのお支払いはご利用いただけません。法人のお客様は請求書でのお支払も可能です。</div>
</li>
<li>
<div class="question"><span>Q.</span>お申し込み方法は？</div>
<div class="answer"><span>A.</span>クレジットカード（ご本人名義）でのご精算となります。デビットカード・プリペイドカード・現金でのお支払いはご利用いただけません。法人のお客様は請求書でのお支払も可能です。</div>
</li>
</ul>

以上、こんな感じで「question」のクラスがついたHTMLをクリックすると、
①クリックした要素（$this）に、openのクラスを付与（addClass）して、矢印アイコンなどの向きを変えたりする。
②クリックした要素に隣接（直下のみ）の「answer」のクラスを持つ要素を表示する（show）。

これらの「addClass」も「show」もどっちもトグル（toggle）なので、カチカチクリックするごとに「removeClass」と「hide」を繰り返す。
その結果、質問文章をクリックしたら答えがパカッと開いて、もう一回押すと閉じる動きになってるよ。

注意したいのは、上記の記述は一度クリックした質問と答えは次の質問をクリックした時に閉じるものではなく、開きっぱなしバージョンということ。
そんな時はクリックしたもの以外「.not()」を使います。

「li.question」のとこで説明すると、「$('ul.qa li .question').not(this).removeClass('open');」こんな感じ。
questionクラスを持ったliだけど、クリックしたli.question以外からopenのクラスを除去するっていう内容です。同様にanswer側も「hide()」を使って非表示にしたら完成。正解コードはあえて書かないので、やってみて分からなければ誰か先輩に教わってください。