jQueryで作る開閉式リスト

jQuery

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

htmlコード

“`<div class="faqbox">
<h3>質問質問質問質問質問質問</h3>
<div class="answer">
<p>回答回答回答回答回答回答</p>
<p>回答回答回答回答回答回答</p>
<p>回答回答回答回答回答回答</p>
<p>回答回答回答回答回答回答</p>
</div>
</div><!–/faqbox–>

<div class="faqbox">
<h3>質問質問質問質問質問質問</h3>
<div class="answer">
<p>回答回答回答回答回答回答</p>
<p>回答回答回答回答回答回答</p>
<p>回答回答回答回答回答回答</p>
<p>回答回答回答回答回答回答</p>
</div>
</div><!–/faqbox–>“`

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

タイトルとURLをコピーしました