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

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

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

完成形のコード

HTML(サイドバー部分)

CSS

jQuery

コードの解説

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

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

 

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

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

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

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

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

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

 

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

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

 

jQueryの6行目

$(‘#sidebar’).height($(‘#sidebar’).height());

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

 

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

まとめ

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

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

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

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

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA