jQueryでつくるアコーディオンメニューCookie機能付き

繁忙期真っ只中です。

シルバーウィークやらプラチナウィークやらが９月にあるそうですが、
仕事をするものからすれば嬉しくもあり、煩わしくもあり。

この５連休のために、連休前にどかっと仕事を終わらせなければならない、という反面、
連休明けのお仕事を連休中に（出勤して）終わらせてしまえる（笑）、という考え方もできるし。

どうなることやら。


ということで、（全然関係ない前置きでしたが、）
jQueryでつくるアコーディオンメニュー（Cookie機能付き）
のご紹介です。
デモを見る

参考にさせてもらったサイトは下記です。
jQueryを使用したCookie開閉保持メニューをよりjQueryっぽく書き直す


「アコーディオンメニュー」とは書いていますが、
実際にはメニューではなく、開閉式のコンテンツとして実装しました。
デフォルトでは詳細が隠れていて、ボタンを押すと詳細情報が表示される仕組みです。

あまり汎用性を考えず、
「このページにだけ組み込むためのスクリプト」として書いたため、（しかもそれを汎用的にする気力がないため、）
ちょっと扱いづらいかもしれません。

ブラウザを閉じた時点でcookieは消えるようにしています。
また、最初のアクセス時に一番上の項目が開いている状態になるようにしています。


JSルールとしては、

「ひらく」ボタン⇒ファイル名が○○_cl.拡張子
「ひらく」ボタンロールオーバー後⇒○○_cl_o.拡張子
「とじる」ボタン⇒○○_op.拡張子
「とじる」ボタンロールオーバー後⇒○○_op_o.拡張子

全部ひらく・とじるボタン⇒命名ルールは上に同じ。imgのidにallviewを指定。

開閉コンテンツ⇒div.detailの中に入れる

cookieの配列は現状ではa,b,c,d,e,f,gまではいっています。
aが最初の.section、bが2番目の.section。という感じで、cookieと同期しています。
項目を増やしたい場合は、アルファベットを増やせばOK。

※ただし、エクセルの列表示みたいにBa、Bbとかはできないハズ。なので、26項目が限界かなと思います。
※1と9は別のトリガーに使っているので、cookie配列の中に入れないで下さい。


本当はjQuery以外のライブラリは使いたくなかったけれど、
JSの技量が足りないために導入いたしました。
何度かもう実装できんかもと思ったけれど、無事できてよかったです。