jQueryでFAQなどの開閉式パネルを実装したい
次のような動作をするQ&Aの開閉式パネルをjQueryで作ってみました。
1) QをクリックするとAが開く
2) 他のQをクリックすると1)で開いていたAが閉じ2)でクリックされたQのAが開く
3) もう一度2)でクリックしたQをクリックするとそのQのAが閉じる
■jQuery■
$(function(){
$("dd").css("display","none");
$("dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}else{
$("dd").slideUp("slow");}
});
});
■html■
<dl>
<dt>Q1.*********************************************</dt>
<dd>A1.*********************************************</dd>
<dt>Q2.*********************************************</dt>
<dd>A2.*********************************************</dd>
<dt>Q3.*********************************************</dt>
<dd>A3.*********************************************</dd>
</dl>
※(2011/11/30) 改良版ができました。実際にはこちらを参考にしていただきたいです。
