JavaScript

質問をクリックすると回答が下にニュッと出てくる実装

FAQ（よくある質問）とか、Q&Aページでよくある、「Q.○○ですか?」のような質問事項をクリックすると、
その下にアンサーが表示される、もう一回質問事項をクリックすると引っ込む、というシンプルな機能が作りたかった。
こういう1つの項目に対して1つの説明があるものは<dl>,<dt>,<dd>タグを使って実装すると良いらしい。

■事前準備
・jquery.jsを読み込む
・<dd>をdisplay:none;に設定しておく

■コード
HTML
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<dl id="faq">
<dt>
        Q.中央アメリカのパナマと陸上で国境を接している南アメリカの国はどこでしょう？
    </dt>
<dd>
        A.コロンビア
    </dd>
<dt>
        Q.TVアニメプリキュアシリーズで2月
    </dt>
<dd>
        A.スマイルプリキュア
    </dd>
</dl>
Jquery
?
1
2
3
4
5
6
$(function(){
 // 質問項目クリックで開閉する回答
 $("#faq dt").on("click", function() {
  $(this).next().slideToggle();
 });
});

回答が開いてる間は色を変えるとかやる場合は、$(this).toggleClass("open_question");
とか書くと、クリックした<dt>にclass="open_question"が付いて装飾が簡単にできます。
もちろんこのclassもtoggleなので、次にクリックしたとき(回答を閉じるとき)には消えてくれます。
シンプルでとても便利。