FAQページで使えそうな、dtクリックでdd展開するスクリプトを書いてみた。

そういうのが欲しいという人がいたので。

さっくり書いてみました。

デモ

例によってjsdo.itです。

dtクリックでdd展開するアニメーション付きのjQueryのコード – jsdo.it – share JavaScript, HTML5 and CSS

解説

まず

dt要素をクリックした際に処理

を行うようにします。今回は親のdl要素の方にクラス名を付ける事にしました。セレクタについては、今回は解説しません。

// クリックしたら処理実行
$('.faq dt').click(function(event) {
  // ここに処理を書く
});

さて次は

展開するdd要素の検索

です。

HTMLは「dtとddをセットで記述する」というルールを事前に設けておきます。（まあFAQの構造上そうなるとは思いますが。）

クリックされたdt要素は、この場合は$(this)で得る事ができます。（これの解説は省きます。）　dt要素がわかったら、「その次」の要素を得る事ができれば良いですね。それにはjQueryのnext()メソッドを使用します。

$('.faq dt').click(function(event) {
  // 直後のdd要素取得
  $(this).next();
});

対象の要素がわかったので、いよいよこれを

スライドして展開

します。これもjQueryで準備されている、slideToggle()メソッドで簡単に実現でいます。

$('.faq dt').click(function(event) {
  // 直後のdd要素を開閉
  $(this).next().slideToggle();
});

これで開閉するようになりました。

最後に、

dd要素が最初は見えないように

します。これはJavaScriptではなくCSSですね。

.faq dd {
    display: none;
}

これで出来上がりです。

あとはお好きなようにデザインを組んでみてくださいね。先ほどのコードをforkして、jsdo.itへ投稿してみると良いでしょう。