jQueryでサイドメニューを縦にスライドして折りたたみする方法

サイドバーって何か情報を載せ始めるとごちゃごちゃしてきて分かりづらくなりますよね。

そこで折りたたんですっきり出来るようにしてみようと思います。

完成形のコード

HTML（サイドバー部分）

CSS

jQuery

コードの解説

サイドバーにあるサブタイトル？はH4タグで書きました。

サイドバーにあるH4タグをクリックすると、そのすぐ下にある .sidetextlist のコンテンツが開閉するものです。

個人的なポイントは、以下のセレクタの指定の仕方です。

第1引数のセレクタは、第2引数のセレクタの子要素や孫要素を指定することになります。

しかし、this (クリックしたH4タグ要素)と、.sidetextlist のブロック要素は親子ではなく横並びです。(兄弟って言うのかな？)

そこでセレクタに + をつけると「次の」という意味になります。

これでクリックした要素の次の要素に対しイベントを追加するということになります。

$(“+.sidetextlist”, “h4”).slideToggle();

のように書くと、どれかH4タグをクリックすると全ての.sidetextlist のブロック要素が開閉してしまいます。

jQueryの6行目

このコードは、メインコンテンツよりサイドバーのほうが大きい場合に、開閉するたび画面サイズが動いてしまうため、画面を開いたタイミングでサイドバーの大きさを取得し、固定で高さを指定しています。

HTML、CSSはそれほど難しいことは書いてませんが、H4タグは通常クリックするものでは無いため、CSSの7行目にcursor: pointer; を入れてマウスカーソルが指マークになるようにしています。

まとめ

サイドバーのタイトルをクリックしたら、そのすぐ下の要素が開閉する仕組みを作りました。

これはサイドバーでしか使えないものではありません。

例えばスマホは全て縦並びになるので、重要では無い要素は最初は閉じておいて、クリックすると開くようにしてもよいかもしれません。

日本人は何かとコンパクトに折りたたまれたものが好きなので活用できると思います(笑)