はい、あのアコーディオンです。
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も多少は触れるようになりたいものです。