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