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) 改良版ができました。実際にはこちらを参考にしていただきたいです。
jQueryの開閉式コンテンツ(完全版) - dentaq log