slideToggleでアコーディオン風メニューを表示する

メニューが長すぎるのでクリックした時だけ表示したい、という場合があると思います。

今回は「slideToggle」を使用してアコーディオン風にメニューを表示する方法をご紹介いたします。

サンプル

「メニュー見出し」をクリックするとメニューが表示されます。

サンプルをご覧ください。

サンプル

ソースと解説

ソースはjs、html、cssの3つとなります。

js

「#accordion」要素をクリックしたときスライド表示がされます。

クリック時に「open」というクラスか加えられ、アイコンが変化します。

「slideToggle(200)」の「200」でメニューを表示する速度が決定されます。数字を変更することでメニューの表示速度を調節することが可能です。

html

「dt」が見出し、「dd」内が表示されるメニューとなります。

css

デフォルトの打ち消しと、見出し、メニューのスタイルに分かれます。

デフォルトのスタイルを打ち消しています。

メニューの見出しのスタイルです。「open」というクラスが加えられた時に、アイコンを変更するようにしています。

メニューのスタイルです。「display: none;」で見出しがクリックされるまでは、メニューを非表示にしています。

全ソース

jqueryは「jquery-1.11.3.min.js」を使用しています。

まとめ

  • ソースはjs、html、cssの3つ。
  • 「#accordion」要素をクリックしたときスライド表示がされる。
  • クリック時に「open」というクラスか加えられ、アイコンが変化する。
  • 「slideToggle(200)」の「200」の数字を変更することで、メニューの表示速度を調節することが可能。
  • 「display: none;」で見出しがクリックされるまでは、メニューを非表示にしている。
  • jqueryは「jquery-1.11.3.min.js」を使用。

アコーディオン風のメニューはメニュー数が多い時に重宝します。

「jquery.cookie.js」を使用すれば、メニューの開閉状態を保持することも可能です。

jqueryはメソッドなどが豊富で、本当に使いやすいと思います。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

slideToggleでアコーディオン風メニューを表示する
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!