jQueryでアコーディオン機能を実装する方法

2023.11.29
Tips

jQueryを使用して、クリックするとコンテンツが開閉するアコーディオン機能を実装する方法の備忘録です。

作成するアコーディオンのサンプルです。ボタンをクリックすると、下のコンテンツ部分の表示・非表示が切り替わります。

SAMPLE

アコーディオンの中身です。

HTMLでボタンと開閉する部分を作成する

HTMLでアコーディオンの開閉ボタンと、表示を切り替えるコンテンツの部分を作成します。

<div class="accordion">
  <div class="accordion_btn">SAMPLE</div>
  <div class="accordion_inner">
    <p>アコーディオンの中身です。</p>
  </div>
</div>

「accordion_btn」クラスのdivが、開閉ボタンになります。

「accordion_inner」クラスのdivで囲んだ部分が、開閉するコンテンツのエリアになります。

CSSを設定する

続いて、ボタンと開閉部分のCSSを設定します。

.sample-accordion-js {
  border: solid 2px #13c3ac;
}
.accordion-js_btn {
  cursor: pointer;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  background: #13c3ac;
  position: relative;
  transition: .3s;
}
.accordion-js_btn:hover {
  opacity: .8;
}
.accordion-js_btn::before {
  content: "＋";
  position: absolute;
  right: 20px;
}
.accordion-js_btn.open::before {
  content: "ー";
}
.accordion-js_inner {
  display: none;
}

余白部分などは割愛しています。

「accordion-js_inner」に「display: none;」を設定することで、開閉部分が閉じた状態になります。

疑似要素「.accordion-js_btn::before」で、アイコン部分を作成しています。

jQueryを設定する

最後に、ボタンを押すと「accordion_inner」クラス部分が開閉するjQueryを設定します。

下記のコードをjsファイルで読み込むか、</body>タグ直前にスクリプトで記入します。

$(function(){
  $('.accordion-js .accordion-js_btn').click(function(){
    $(this).next('.accordion-js_inner').slideToggle();
    $(this).toggleClass("open");
  });
});

「accordion-js_btn」クラスのボタンをクリックすると、「open」クラスが追加されるコードです。

「open」クラスが付与されることで、コンテンツ部分が開き、アイコンが変更されます。

もう一度クリックすると、「open」クラスが削除されコンテンツが閉じます。

JSのコードを設定して、動作を確認できたらアコーディオンの完成です。