0017

jQueryで作る開閉式リスト

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");
});
});