はい、あのアコーディオンです。

CSSでの制御

• アコーディオンでたたまられる要素をcssで非表示にしておく (今回は .off が付いていると display:none)
• 折りたたまれた内容に特定のclassが付与されたら表示にする (今回は .onが付くと diplay:inline)

JSでの制御

• スイッチとなる要素にクリックイベントを付与する(今回は .switch の要素にクリックイベントを付与)
• スイッチの次の要素に特定のクラスがない場合は付与。ある場合は削除という機能を追加 (toggleClassという機能がそれを実現)
• 特定のクラスを付与するまでの時間を設定することでズルーっという感じで折りたたまれた要素が表示されるようにする(.slideToggleにおいて速度が設定できる。今回は fast 他にも slow とか 200 のように時間を設定できる)

jQueryについて

挫折し続けていたjQueryといいますか、そもそものJavascriptというものの扱いについて、下記の本を購入した所、なんとなく理解出来まして、いわいるアコーディオンの実装ができて嬉しかったです。

[amazonjs asin=”479737571X” locale=”JP” tmpl=”Small” title=”作りながら学ぶjQueryデザインの教科書”]
この本についてまだ最初の方の章しか読んでないのですが、JQuaryがどのタイミングでどういう振舞いをするのかが理解できたことがとても良かったです。
さらに理解を深めて、JSも多少は触れるようになりたいものです。

ソース