【備忘録】jQueryでアコーディオンメニュー

はじめに

• jQueryを使ったUIパーツの練習アコーディオンメニュー編です。
• 【jQuery】アコーディオンメニューの作り方解説（複数パターン紹介） - PENGIN BLOGを参考に、アコーディオンメニューの基本構成部分を取り組みました。
• 後々、追記するかもです。

実装

1. とりあえずHTML/CSSで見た目を作る

• この段階で.accordion__contentにはdisplay: none;を適応
  • 本家サイトでは後述のjQueryパートでjQuery側で操作していたが、ブラウザを再読み込みした際に一瞬コンテンツ部分が表示されるのが気になったので変更した。

<dl class="accordion">
  <dt class="accordion__title">メニュー1</dt>
  <dd class="accordion__content">
    メニュー1のコンテンツ内容
  </dd>

  <dt class="accordion__title">メニュー2</dt>
  <dd class="accordion__content">
    メニュー2のコンテンツ内容
  </dd>

  <dt class="accordion__title">メニュー3</dt>
  <dd class="accordion__content">
    メニュー3のコンテンツ内容
  </dd>

  <dt class="accordion__title">メニュー4</dt>
  <dd class="accordion__content">
    メニュー4のコンテンツ内容
  </dd>
</dl>

.accordion__title {
    text-align: center;
    padding: .5em;
    background-color: #6b90ff;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    transition: all .3s;
}

.accordion__content {
    padding: 2em 1em;
    background-color: #d3deff;
    display: none;
}

2. jQueryで動きをつける

• slideToggleメソッドを使って、コンテンツ部分の表示/非表示を切り替える。

$(function () {
  // CSS側で設定したので削除
  // $('.accordion__content').css("display", "none");
  $('.accordion__title').on('click', function() {
    $(this).next().slideToggle();
  });
});

実装後の疑問と調査

• display: none/block;の切り替えにはtransitionが効かないはずでは？
  • 参考 : CSS display:noneでアニメーションする方法
    • ここではSlideToggleメソッドによって、該当の動作が実現できると解説されている。
      • 「簡単に実装できるありがたい機能」として完結してよいのだろうか…?
• そもそもslideToggleメソッドって？
  • 参考 : jQueryのtoggleを活用したいろいろなUIパターンの実装方法 - PENGIN BLOG
    • toggle系メソッドを使うと下記のことができると解説されている。
      • display: none/block;の切り替え
      • クラスの付け外し

参考サイト

• 【jQuery】アコーディオンメニューの作り方解説（複数パターン紹介） - PENGIN BLOG

• jQueryのtoggleを活用したいろいろなUIパターンの実装方法 - PENGIN BLOG

• CSS display:noneでアニメーションする方法