ヘッダーをクリックすると展開するようないわゆるアコーディオンUIの実装が意外とめちゃくちゃ楽でした。 「アコーディオンUIって簡単にできますか？」って聞かれて、「うーん、どうでしょうか。調べてみます」みたいに返答した自分が恥ずかしいぐらい。

jQueryのslideToggle()というメソッドを使います。

手順

超カンタンです。

1. 展開したときに表示したい要素をjQueryでhide()しておく
2. ヘッダー要素のclickイベントで、さっきhideした要素をslideToggle()する

以上！

サンプル

jsfiddleで作りました。Resultタブでheaderと書かれている部分をクリックすると展開します。

展開にかかる時間を変える

slideToggleは引数にアニメーションの時間をミリ秒で取ることができるので展開する感じを変えることができます。

$(".selector").slideToggle(1000) // 1秒
$(".selector").slideToggle(100) // 0.1秒