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

１、slideToggle

２、jsの関連コード
<script>
$(function($){
$('.qa ul li .question').click(function(){
var textList = this.parentNode;
$(textList).toggleClass('open');
$(textList.getElementsByClassName('answer')).slideToggle(150);
});
});

３、関連HTML
<ul>
<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>