コピペで簡単!jQueryでアコーディオン(開閉メニュー)を作る

2018年8月8日

すぐに使えるコードをいっぱい持っておくと、
いろいろな仕事を振られたときに迅速な対応が出来るようになっていきます。
みなさんこんにちわ
今回は、メニューやFAQなどでよく見るアコーディオンを、
コピペで簡単に使えるように用意しましたのでよければお使いください。

jQueryの準備をする

まずはjQueryのライブラリーが必要になります。

公式サイトからjQueryをダウンロードする

特に何もなければ最新版をダウンロードします。

ダウンロードしたら、サ―バーの任意の場所にアップロード
下記のコードを使用するページ内に記述

HTML

  1. <head>
  2. <script type="text/javascript" src="アップロードした場所/jquery-3.2.1.min.js"></script>
  3. </head>

headタグの間に”><script~</script>までを記述します

jQueryをコピペする

下のjQueryをコピーしてHTML内に貼り付ける
貼り付ける場所はjQueryのライブラリーを読み込んだ後ならどこでもいいです
推奨は、「任意の名前.js」を作成しそこに貼り付け
難しければ、HTMLのできるだけ最後に貼り付けましょう。

jQuery

  1. <script>
  2. $(function (){
  3. if($('[class^="js-toggle"]')){
  4. $('.js-toggle__tit').on("click", function() {
  5. var element = $(this);
  6. var toggleClass = element.parent('[class^="js-toggle"]')[0].className.split(' ')[0];
  7. $('.'+toggleClass+' dd').not(element.next()).slideUp(100);
  8. $('.'+toggleClass+' dd').not(element).removeClass('is-active');
  9. element.next().slideToggle(100);
  10. element.toggleClass('is-active');
  11. });
  12. }
  13. });
  14. </script>

アコーディオン部分のHTMLとCSS

簡単に作成できるようにするために「dl,dt,dd」で作成しています。
構造を変更すると、動作しませんのでご注意ください。

HTML

  1. <dl class="js-toggle">
  2. <dt>開く①</dt>
  3. <dd>内容①</dd>
  4. <dt>開く②</dt>
  5. <dd>内容②</dd>
  6. </dl>

CSSはそのままコピーして張り付け

CSS

  1. .js-toggle dd {display: none;}
  2. .js-toggle dt {cursor: pointer;}

jQuery アコーディオン 動作サンプル

開くをクリックすると内容が出てきます。

開く①
内容①
開く②
内容②

まとめ

HTMLの構造さえ変えなければメニューにも記事の中でも使用できます。
実際にFAQなどでよく使用します。

jQueryの知識が少しあれば、セレクタを変更することでさらに応用ができます。
さらっと使って楽に仕事しましょう!
ではでは〜