jQueryで作る開閉式リスト

2010.1.1

自身の要素の「次の要素」をトグル化することによって動きを実現します。
ページが縦長になりがちなFAQなどで使えるのではないでしょうか？コードは以下。

htmlコード

質問質問質問質問質問質問
回答回答回答回答回答回答

回答回答回答回答回答回答
回答回答回答回答回答回答
回答回答回答回答回答回答



質問質問質問質問質問質問

回答回答回答回答回答回答
回答回答回答回答回答回答
回答回答回答回答回答回答
回答回答回答回答回答回答

jQueryとともに読み込ませる

h3タグの次の要素（つまりdiv class=answer）に対して表示・非表示の処理を行います。

$(document).ready(function() {
//要素をhoverした時の動作（マウスが乗った時,マウスが離れた時）
$("div.faqbox h3").hover(function(){ $(this).css("cursor","pointer");
$(this).css("text-decoration","underline"); },function(){ $(this).css("cursor","default");
$(this).css("text-decoration","none"); });
//FAQの回答部分を隠しておく
$("div.faqbox div.answer").css("display","none");
//要素（h3）がクリックされたら
$("div.faqbox h3").click(function(){
//自身（h3）の要素の次の要素（div class="answer"）をトグル表示する。
$(this).next().slideToggle("normal");
});
});