[jQuery] アコーディオンメニュー実装の覚書

久々にアコーディオンメニューを実装する機会があったのでメモ。

#実装

#HTML

<div class="accordion-container">
  <dt class="title">タイトル1</dt>
  <dd class="contents">コンテンツ1</dd>
  <dt class="title">タイトル2</dt>
  <dd class="contents">コンテンツ2</dd>
  <dt class="title">タイトル3</dt>
  <dd class="contents">コンテンツ3</dd>
  <dt class="title">タイトル4</dt>
  <dd class="contents">コンテンツ4</dd>
</div>

定義リスト(<dl>,<dt>,<dd>)で実装を行う。

#CSS

.accordion-container .contents {
  display: none;
}
  • 初期状態ではdisplay:noneで非表示にしておく
    .slideToggle()display:blockで表示状態になる

#jQuery

$('.accordion-container').find('dt').on('click', function() {
    var $self = $(this);

    $self.toggleClass('active');
    $self.next('dd').stop(true, false).slideToggle();
});
  • togleClass('active').activeクラスを追加し、”開いている状態”を表す
    開いている場合に矢印の状態を変える… などのスタイル定義があれば使う
  • next('dd')は「次の要素である<dd>」に対して.slideToggle()する
  • stop(true, false)で連続クリックされても、開き閉じをクリック回数分させないようにする

  • 連動してクリックした以外を連動して閉じる場合は、siblings('dd').slideDown()を使う

twitterfacebookhatenafacebook