jQueryでさくっとアコーディオンメニューを作る

本当にさくっと作りたい時のメモ用
本当に最低限の動きだけ。

HTML

<div class="js-accordion-toggle">開く</div>
<div class="js-accordion-item" style="display:none;">
　ここにコンテンツが入る
</div>

ボタンとなる要素に.js-accordion-toggle、開閉したい要素に.js-accordion-itemを設定。
display:none;を直書きしているのはHTMLが一番早く読み込まれるため、CSSやJSに設定を追加するよりも遅延が少なく、コンテンツが一瞬表示されてしまうのを防ぐため。

ページが開いた状態を初期状態にしたい場合はstyle="display:none;"を書かずに.js-accordion-toggleにis-openクラスを追加しときましょう。

jQuery

  var $toggle       = $( '.js-accordion-toggle' );
  var $item         = $( '.js-accordion-item' );
  var openClass     = 'is-open';
  var operationText = [ '開く', '閉じる' ];


  $toggle.on( 'click', function() {
    if ( $( this ).hasClass( openClass ) ) {
      $( this ).removeClass( openClass );
      $( this ).next( $item ).slideUp();
      $( this ).text( operationText[0]);
    } else {
      $( this ).addClass( openClass );
      $( this ).next( $item ).slideDown();
      $( this ).text( operationText[1]);
    }
  });

クリックした$toggleがis-openクラスを持っているかどうかを判別し、

• ついていなければis-openを付与し、直下にある$itemを表示させる。
• ついていればis-openを削除し、直下にある$itemを非表示にする。

operationTextはボタンの文言を変更するための文字列のまとまり。

• is-openがついていればoperationText[open]に格納されている文字列を表示
• ついていなければoperationText[close]に格納されている文字列を表示させる。

完成形

こちらが完成形です。

See the Pen NWxXZea by nagomi-753 (@nagomi-753) on CodePen.

以上です。
さっくりアコーディオンさせたい場合のメモでした。