【PR】を含みます。

フロントエンド

【jQuery】アコーディオン(開閉ボタン)を実装する方法

jQuery アコーディオン(開閉ボタン)を実装する方法

jQueryでアコーディオン(開閉ボタン)を実装する方法を紹介します。

フロントエンドのコーディングでよく使用するため、コピペで使用できるようまとめています。

この記事では、基本的なアコーディオンの実装から、アクセシビリティ対応済みのアコーディオンまで、実際に動作するサンプルコードと共に詳しく解説します。

jQueryを使ったアコーディオンの実装は、スライドアニメーションや状態管理が簡単にできるため、FAQページやナビゲーションメニューなどで重宝します。

アコーディオンをJavaScriptで実装する方法は以下の記事で紹介しています。

あわせて読む
JavaScript jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

【JavaScript】jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

もくじ【実装例】jQuery未使用のアコーディオンメニュー（開閉ボタン）のサンプル【コピペOK】jQuery未使用のアコーディオンメニューの実装コード【実装例】アクセシビリティ対応済みのアコーディオン ...

アコーディオンをHTMLのみで実装する方法は以下の記事で紹介しています。

あわせて読む
CSS不要 HTMLのみでアコーディオン(開閉ボタン)を実装する方法

【CSS不要】HTMLのみでアコーディオン(開閉ボタン)を実装する方法

もくじ【サンプル】HTMLのみでアコーディオンメニューを実装【実装コード】HTMLのみでアコーディオンメニューを実装detailsタグとsummaryタグにCSS当ててデザインを調整【サンプル】CSS ...

アコーディオンをHTMLとCSSのみで実装する方法は以下の記事で紹介しています。

あわせて読む
HTML・CSS アコーディオンメニューをHTMLとCSSのみで実装する方法

【HTML・CSS】アコーディオンメニューをHTMLとCSSのみで実装する方法

もくじ単体用アコーディオン（折りたたみメニュー）【サンプル】単体用アコーディオン【コピペOK】HTML・CSSのみで単体用アコーディオンを実装単体用アコーディオンを複数利用する方法2段のアコーディオン ...

【サンプル】jQueryでアコーディオンメニューを実装

Q. jQueryでアコーディオン(開閉ボタン)を実装する方法は？

A. 下記「【コピペOK】jQueryを使用したアコーディオンメニューの実装コード」より、HTML・CSS・jQueryをコピペすることでアコーディオン(開閉ボタン)を実装することができます。

Q. はじめからアコーディオンを開いた状態にする方法は？

HTMLにis-activeを追加することで可能です。

class="accordion js-accordion"にis-activeを追加

【コピペOK】jQueryを使用したアコーディオンメニューの実装コード

下記HTML・CSS・jQueryをコピペすることでアコーディオンを実装することができます。

※事前にjQueryの導入が必要です。

Copyボタンをクリックするとコピーできます。

HTML
Copy
<div class="accordion js-accordion">
  <div class="accordion-summary js-accordion-toggle">
    <p class="accordion-ttl">Q. テキスト</p>
    <div class="accordion-toggle-icon">
      <span class="accordion-toggle-line"></span>
      <span class="accordion-toggle-line"></span>
    </div>
  </div>
  <div class="accordion-panel js-accordion-panel">
    <div class="accordion-details">
      <div class="accordion-details-inner">
        <p class="accordion-txt">A. テキスト</p>
        <p class="accordion-txt">※テキスト</p>
      </div>
    </div>
  </div>
</div>
<div class="accordion js-accordion is-active">
  <div class="accordion-summary js-accordion-toggle">
    <p class="accordion-ttl">Q. テキスト</p>
    <div class="accordion-toggle-icon">
      <span class="accordion-toggle-line"></span>
      <span class="accordion-toggle-line"></span>
    </div>
  </div>
  <div class="accordion-panel js-accordion-panel">
    <div class="accordion-details">
      <div class="accordion-details-inner">
        <p class="accordion-txt">A. テキスト</p>
        <p class="accordion-txt">※テキスト</p>
      </div>
    </div>
  </div>
</div>
CSS
Copy
.accordion * {
  box-sizing: border-box;
}
.accordion {
  margin-bottom: 30px;
  background: #ffefef;
  border-radius: 5px;
}
.accordion-summary {
  display: block;
  position: relative;
  width: 100%;
  padding: 1em 3.2em 1em 2em;
  font: inherit;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}
.accordion-summary:active {
  background: transparent;
}
.accordion-ttl {
  margin: 0;
  font-size: 16px;
}
.accordion-toggle-icon {
  position: absolute;
  top: 50%;
  right: 1.5em;
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
}
.accordion-toggle-line {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8em;
  height: 2px;
  background: #333;
}
.accordion-toggle-line:nth-child(1) {
  transform: translate(-50%, -50%);
}
.accordion-toggle-line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: 0.3s linear;
}
.accordion.is-active .accordion-toggle-line:nth-child(2) {
  opacity: 0;
}
.accordion-panel {
  display: none;
}
.accordion.is-active .accordion-panel {
  display: block;
}
.accordion-details {
  padding: 0 1.5em 1.5em;
}
.accordion-details-inner {
  padding: 1.5em;
  background: #fff;
  border-radius: 5px;
}
.accordion-txt {
  margin: 0;
  font-size: 16px;
}
jQuery
Copy
$(function() {
  $(document).on('click', '.js-accordion-toggle', function() {
    const accordion = $(this).parents('.js-accordion');
    if (!accordion.length) return;
    const accordionPanel = accordion.find('.js-accordion-panel');
    if (!accordionPanel.length) return;
    if (accordion.hasClass('is-active')) {
      accordionPanel.slideUp(function() {
        accordion.removeClass('is-active');
      });
    } else {
      accordionPanel.slideDown(function() {
        accordion.addClass('is-active');
      });
    }
  });
});

【サンプル】jQueryでアクセシビリティ対応済みのアコーディオンメニューを実装

class="accordion js-accordion"にis-activeを追加とaria-expanded="false"をaria-expanded="true"に変更、hidden="until-found"を削除することで可能です。

【コピペOK】jQueryでアクセシビリティ対応済みのアコーディオンメニューを実装

下記HTML・CSS・jQueryをコピペすることでアコーディオンを実装することができます。

Copyをクリックするとコピーできます。

HTML
Copy
<div class="accordion js-accordion">
  <button id="accordion-summary-1" class="accordion-summary js-accordion-btn" aria-expanded="false" aria-controls="accordion-panel-1">
    <span class="accordion-ttl">Q. テキスト</span>
    <span class="accordion-toggle-icon" aria-hidden="true">
      <span class="accordion-toggle-line"></span>
      <span class="accordion-toggle-line"></span>
    </span>
  </button>
  <div id="accordion-panel-1" class="accordion-panel-other js-accordion-panel" role="region" aria-labelledby="accordion-summary-1" hidden="until-found">
    <div class="accordion-details">
      <div class="accordion-details-inner">
        <p class="accordion-txt">A. テキスト</p>
        <p class="accordion-txt">※テキスト</p>
      </div>
    </div>
  </div>
</div>
<div class="accordion js-accordion is-active">
  <button id="accordion-summary-2" class="accordion-summary js-accordion-btn" aria-expanded="true" aria-controls="accordion-panel-2">
    <span class="accordion-ttl">Q. テキスト</span>
    <span class="accordion-toggle-icon" aria-hidden="true">
      <span class="accordion-toggle-line"></span>
      <span class="accordion-toggle-line"></span>
    </span>
  </button>
  <div id="accordion-panel-2" class="accordion-panel-other js-accordion-panel" role="region" aria-labelledby="accordion-summary-2">
    <div class="accordion-details">
      <div class="accordion-details-inner">
        <p class="accordion-txt">A. テキスト</p>
        <p class="accordion-txt">※テキスト</p>
      </div>
    </div>
  </div>
</div>
CSS
Copy
.accordion * {
  box-sizing: border-box;
}
.accordion {
  margin-bottom: 30px;
  background: #ffefef;
  border-radius: 5px;
}
.accordion-summary {
  display: block;
  position: relative;
  width: 100%;
  padding: 1em 3.2em 1em 2em;
  font: inherit;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}
.accordion-summary:active {
  background: transparent;
}
.accordion-ttl {
  margin: 0;
  font-size: 16px;
}
.accordion-toggle-icon {
  position: absolute;
  top: 50%;
  right: 1.5em;
  width: 1em;
  height: 1em;
  transform: translateY(-50%);
}
.accordion-toggle-line {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8em;
  height: 2px;
  background: #333;
}
.accordion-toggle-line:nth-child(1) {
  transform: translate(-50%, -50%);
}
.accordion-toggle-line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: 0.3s linear;
}
.accordion.is-active .accordion-toggle-line:nth-child(2) {
  opacity: 0;
}
.accordion-details {
  padding: 0 1.5em 1.5em;
}
.accordion-details-inner {
  padding: 1.5em;
  background: #fff;
  border-radius: 5px;
}
.accordion-txt {
  margin: 0;
  font-size: 16px;
}
jQuery
Copy
$(function() {
  $(document).on('click', '.js-accordion-btn', function() {
    const accordionBtn = $(this);
    const accordion = accordionBtn.parents('.js-accordion');
    if (!accordion.length) return;
    const accordionPanel = accordion.find('.js-accordion-panel');
    if (!accordionPanel.length) return;
    // アニメーション中は処理を中断
    if (accordionPanel.is(':animated')) return;
    if (accordion.hasClass('is-active')) {
      accordionPanel.slideUp(function() {
        accordion.removeClass('is-active');
        accordionPanel[0].setAttribute('hidden', 'until-found');
        accordionPanel.css('display', '');
        accordionBtn.attr('aria-expanded', 'false');
      });
    } else {
      accordionPanel.css('display', 'none');
      accordionPanel.removeAttr('hidden');
      accordionPanel.slideDown(function() {
        accordion.addClass('is-active');
        accordionBtn.attr('aria-expanded', 'true');
      });
    }
  });
});

Q&A

アコーディオンをJavaScriptで実装する方法は以下の記事で紹介しています。

あわせて読む
JavaScript jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

【JavaScript】jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

もくじ【実装例】jQuery未使用のアコーディオンメニュー（開閉ボタン）のサンプル【コピペOK】jQuery未使用のアコーディオンメニューの実装コード【実装例】アクセシビリティ対応済みのアコーディオン ...

アコーディオンをHTMLのみで実装する方法は以下の記事で紹介しています。

あわせて読む
CSS不要 HTMLのみでアコーディオン(開閉ボタン)を実装する方法

【CSS不要】HTMLのみでアコーディオン(開閉ボタン)を実装する方法

もくじ【サンプル】HTMLのみでアコーディオンメニューを実装【実装コード】HTMLのみでアコーディオンメニューを実装detailsタグとsummaryタグにCSS当ててデザインを調整【サンプル】CSS ...

アコーディオンをHTMLとCSSのみで実装する方法は以下の記事で紹介しています。

あわせて読む
HTML・CSS アコーディオンメニューをHTMLとCSSのみで実装する方法

【HTML・CSS】アコーディオンメニューをHTMLとCSSのみで実装する方法

もくじ単体用アコーディオン（折りたたみメニュー）【サンプル】単体用アコーディオン【コピペOK】HTML・CSSのみで単体用アコーディオンを実装単体用アコーディオンを複数利用する方法2段のアコーディオン ...

-フロントエンド
-