【JS】スマホ用のQ&AページをslideToggleを使って作ってみる
2018/01/19
ここ数日、スマホページをひたすら作っています。
静的ページをゴリゴリ書いているのですが、「よくある質問」のページがやたらと長くなるのが気になり、ちょっと前にもポストした、jQuery の slideToggle を使い、ずらっと並べた質問文をクリック（タップ）したら回答部分がアコーディオン形式で表示されるようにしてみました。
この先、絶対にまた使うことだと思うので、備忘録も兼ねてのポストとします。
jQueryのSlideToggleを使ってQAページを作る
コード
HTML
QA部分のHTMLです。
|
1 2 3 4 5 6 7 8 |
<p class="question">●●●●とはなんですか？</p> <p class="answer">●●●●とは■■■■のことです。</p> <p class="question">●●●●はいつまで続きますか？</p> <p class="answer">●●●●とは■■■■まで続く予定です。</p> <p class="question">●●●●はどうすれば良いですか？</p> <p class="answer">は■■■■して下さい。</p> |
Javascript
slideToggle部分のスクリプトです。
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(function(){ $("p.answer").hide(); $("p.question").click(function(){ $(this).next().slideToggle("slow"); }); }); </script> |
簡単な解説
まず、 $("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つで同じページに何個もアコーディオンさせたい箇所があっても、クリックした要素（トリガー）の次の要素だけが実行されます。
うーむ、便利！