【PR】を含みます。

フロントエンド

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

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

jQueryを使わずにJavaScriptでアコーディオンメニューを実装する方法を解説します。

HTML・CSS・JavaScriptのコードをコピペするだけで使える、アニメーション付きのアコーディオンの作り方を紹介します。

jQueryが使用できない環境でも、アクセシビリティに配慮したアコーディオンメニューを実装できるよう、コードを公開しています。

スムーズな開閉アニメーションも実装済みです。

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

あわせて読む
jQuery アコーディオンメニューを作成する方法
【jQuery】アコーディオン(開閉ボタン)を実装する方法

もくじjQueryを使用したアコーディオンサンプルjQueryを使用したアコーディオンコピペ用コード使用方法　Q&A動かないのですが、どうすれば良いですか？アコーディオンの追加方法は？レスポンシブに対 ...

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

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

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

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

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

もくじ【単体用】アコーディオン（折りたたみメニュー）【単体用】HTML・CSS【単体用】アコーディオン（折りたたみメニュー）を複数利用する場合【2段用】アコーディオン（折りたたみメニュー）【2段用】H ...

【実装例】jQuery未使用のアコーディオンメニュー（開閉ボタン）のサンプル

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

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

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

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


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

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

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

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;
  width: 100%;
  padding: 1em 3.2em 1em 2em;
  border: none;
  position: relative;
  font: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.accordion-ttl {
  margin: 0;
  font-size: 16px;
}
.accordion-toggle-icon {
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  right: 1.5em;
  transform: translateY(-50%);
}
.accordion-toggle-line {
  display: block;
  width: 0.8em;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  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;
  border-radius: 5px;
  background: #fff;
}
.accordion-txt {
  margin: 0;
  font-size: 16px;
}
JavaScript
Copy
const accordionToggle = document.querySelectorAll('.js-accordion-toggle');
accordionToggle.forEach(function (element) {
  element.addEventListener('click', function () {
    const accordion = element.closest('.js-accordion');
    if (!accordion) return;
    const accordionPanel = accordion.querySelector('.js-accordion-panel');
    if (!accordionPanel) return;
    slideToggle(accordionPanel, 500);
  });
});
function slideUp(element, duration = 400) {
  if (element.dataset.sliding === 'true') return;
  element.dataset.sliding = 'true';
  element.style.display = 'block';
  element.closest('.js-accordion').classList.remove('is-active');
  const height = element.offsetHeight;
  element.style.height = height + 'px';
  element.offsetHeight;
  element.style.overflow = 'hidden';
  element.style.transition = `height ${duration}ms ease`;
  requestAnimationFrame(() => {
    element.style.height = '0px';
  });
  setTimeout(() => {
    element.style.display = 'none';
    element.style.removeProperty('height');
    element.style.removeProperty('overflow');
    element.style.removeProperty('transition');
    element.dataset.sliding = 'false';
  }, duration);
}
function slideDown(element, duration = 400) {
  if (element.dataset.sliding === 'true') return;
  element.dataset.sliding = 'true';
  element.closest('.js-accordion').classList.add('is-active');
  element.style.removeProperty('display');
  let display = window.getComputedStyle(element).display;
  if (display === 'none') display = 'block';
  element.style.display = display;
  const height = element.scrollHeight;
  element.style.height = '0px';
  element.offsetHeight;
  element.style.overflow = 'hidden';
  element.style.transition = `height ${duration}ms ease`;
  requestAnimationFrame(() => {
    element.style.height = height + 'px';
  });
  setTimeout(() => {
    element.style.removeProperty('height');
    element.style.removeProperty('overflow');
    element.style.removeProperty('transition');
    element.dataset.sliding = 'false';
  }, duration);
}
function slideToggle(element, duration = 400) {
  const isActive = element.closest('.js-accordion').classList.contains('is-active');
  if (isActive) {
    slideUp(element, duration);
  } else {
    slideDown(element, duration);
  }
}

【実装例】アクセシビリティ対応済みのアコーディオンメニュー（開閉ボタン）のサンプル

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

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

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-hidden="true" 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="false" 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-hidden="true" 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;
  width: 100%;
  padding: 1em 3.2em 1em 2em;
  border: none;
  position: relative;
  font: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}
.accordion-ttl {
  margin: 0;
  font-size: 16px;
}
.accordion-toggle-icon {
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  right: 1.5em;
  transform: translateY(-50%);
}
.accordion-toggle-line {
  display: block;
  width: 0.8em;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  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;
  border-radius: 5px;
  background: #fff;
}
.accordion-txt {
  margin: 0;
  font-size: 16px;
}
JavaScript
Copy
const accordionBtn = document.querySelectorAll('.js-accordion-btn');
accordionBtn.forEach(function (element) {
  element.addEventListener('click', function () {
    const accordion = element.closest('.js-accordion');
    if (!accordion) return;
    const accordionPanel = accordion.querySelector('.js-accordion-panel');
    if (!accordionPanel) return;
    toggleAccordionPanel(accordionPanel, 500);
  });
});
function openAccordionPanel(element, duration = 400) {
  if (element.dataset.sliding === 'true') return;
  element.dataset.sliding = 'true';
  const accordion = element.closest('.js-accordion');
  accordion.classList.add('is-active');
  element.removeAttribute("hidden");
  const height = element.scrollHeight;
  element.style.height = '0px';
  element.offsetHeight;
  element.style.overflow = 'hidden';
  element.style.transition = `height ${duration}ms ease`;
  const accordionBtn = accordion.querySelector('.js-accordion-btn');
  accordionBtn.setAttribute('aria-expanded', 'true');
  element.setAttribute('aria-hidden', 'false');
  requestAnimationFrame(() => {
    element.style.height = height + 'px';
  });
  setTimeout(() => {
    element.style.removeProperty('height');
    element.style.removeProperty('overflow');
    element.style.removeProperty('transition');
    element.dataset.sliding = 'false';
  }, duration);
}
function closeAccordionPanel(element, duration = 400) {
  if (element.dataset.sliding === 'true') return;
  element.dataset.sliding = 'true';
  const accordion = element.closest('.js-accordion');
  accordion.classList.remove('is-active');
  const height = element.offsetHeight;
  element.style.height = height + 'px';
  element.offsetHeight;
  element.style.overflow = 'hidden';
  element.style.transition = `height ${duration}ms ease`;
  const accordionBtn = accordion.querySelector('.js-accordion-btn');
  accordionBtn.setAttribute('aria-expanded', 'false');
  element.setAttribute('aria-hidden', 'true');
  requestAnimationFrame(() => {
    element.style.height = '0px';
  });
  setTimeout(() => {
    element.style.removeProperty('height');
    element.style.removeProperty('overflow');
    element.style.removeProperty('transition');
    element.dataset.sliding = 'false';
    element.setAttribute('hidden', 'until-found');
  }, duration);
}
function toggleAccordionPanel(element, duration = 400) {
  const isActive = element.closest('.js-accordion').classList.contains('is-active');
  if (isActive) {
    closeAccordionPanel(element, duration);
  } else {
    openAccordionPanel(element, duration);
  }
}

Q & A

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

あわせて読む
jQuery アコーディオンメニューを作成する方法
【jQuery】アコーディオン(開閉ボタン)を実装する方法

もくじjQueryを使用したアコーディオンサンプルjQueryを使用したアコーディオンコピペ用コード使用方法　Q&A動かないのですが、どうすれば良いですか？アコーディオンの追加方法は？レスポンシブに対 ...

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

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

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

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

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

もくじ【単体用】アコーディオン（折りたたみメニュー）【単体用】HTML・CSS【単体用】アコーディオン（折りたたみメニュー）を複数利用する場合【2段用】アコーディオン（折りたたみメニュー）【2段用】H ...

udemyでJavaScriptを学ぶ

講座名
【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編） icon
学習時間
24.5時間
学習内容
  • 本格的なWEBサイトを作成する方法について学びます。
  • Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます。
  • CSS、JavaScriptの実践的な記述について深く学びます。
  • CSS、JavaScriptアニメーションの実装について学びます。
  • 最新の実践的なWEB画面の作成方法について深く学びます。
  • CSS、JavaScriptのコードの最適化、安定化について学びます。
  • 維持管理、持続可能なコードの記述方法について学びます。
対象受講者
  • ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
  • 他の先生のフロントエンドの入門編を終えたレベルの方
  • 自分で本格的なWEBサイトを作ってみたい方
  • CSS、JavaScriptの実践的な基礎を効率的に学びたい方
  • CSS、JavaScriptを今後仕事で使う予定の方
  • CSS、JavaScriptのコードの整理方法について学びたい方
  • CSS、JavaScriptのアニメーションを学びたい方
  • CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
  • CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方
講座名
【JS】ガチで学びたい人のためのJavaScriptメカニズム icon
学習時間
20.5時間
学習内容
  • JavaScriptの動作原理について深く学びます。
  • JavaScriptがどのように実行されるのかについて深く学びます。
  • ES6+の最新のJavaScriptの記法について幅広く学びます。
  • 変数や参照の仕組みについて深く学びます。
  • オブジェクトのメカニズムについて深く学びます。
  • 関数のメカニズムについて深く学びます。
  • スコープの仕組みについて深く学びます。
  • プロトタイプのメカニズムについて深く学びます。
  • 反復処理のメカニズムについて深く学びます。
  • ジェネレーターやイテレーターについて深く学びます。
  • コールバック関数について深く学びます。
  • 非同期処理のメカニズムについて深く学びます。
  • モジュールの仕組みについて深く学びます。
  • クロージャーの仕組みについて深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • thisの仕組みについて深く学びます。
  • bind、apply、callの動作原理について深く学びます。
  • クラスと継承の仕組みについて深く学びます。
  • ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
  • Map，Setなどの強力なコレクションについて実践を交えて学びます。
  • よく使用される強力な実装パターンを演習を交えて学びます。
  • 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
対象受講者
  • JavaScriptをコアの動作原理からキチンと理解したい方。
  • 自分の思った通りコードが動かずに悩んでいる方。
  • 自分の思った通りに動かず、気付いたら解決するのに１日経ってしまっていた経験のある方。
  • React, Vue, Angularが使いこなせず悩んでいる方。
  • JavaScriptの不可解な動きが理解できず、苦しんでいる方。
  • 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
  • JavaScriptを本気で勉強したいと思っている方。
  • JavaScriptの変態仕様に苦しんでいる方。
  • JavaScriptが苦手なプログラマーの方。

-フロントエンド
-