Eyecatch jQuery

Javascript,jQuery

スマホ用のQ&AページをslideToggleを使って作ってみる

2013/05/08

ここ数日、スマホページをひたすら作っています。
で、静的ページをゴリゴリ書いているのですが、「よくある質問」のページがやたらと長くなるのが気になり、ちょっと前にもポストした、jQuery の slideToggle をちょっと改造して、質問をずらっと並べ、質問部分をクリック(タップ)したら回答部分がアコーディオン形式で表示されるようにしてみました。

この先、絶対にまた使うことだと思うので、おなじみ、忘備録も兼ねてのポストです。

QA部分のHTMLです。

slideToggle部分のスクリプトです。

簡単な解説。
まず、 $("p.answer").hide(); 部分で、<p class"answer">***</p> 部分を hide、つまり隠します。
$(this).next().slideToggle("slow"); の、$(this) はクリックされる(された)<p class"question">***</p> が代入されます。
続きの .next().slideToggle("slow"); は $(this) に代入されている次の要素である、<p class"answer">***</p> 部分が slideToggle される、ということになります。

このルーチン1つで同じページに何個もアコーディオンさせたい箇所があっても、クリックした要素(トリガー)の次の要素だけが実行されます。
うーむ、便利!

-Javascript,jQuery
-, , ,