MENU
  1. ホーム
  2. コーディング
  3. 【コピペで実装】初心者必見！アコーディオンメニューの作り方

【コピペで実装】初心者必見！アコーディオンメニューの作り方

コーディング
目次

はじめに

「FAQ形式のページを作りたいけど、アコーディオンの実装方法がわからない…」
「クリックで開閉するメニューを簡単に作りたい…」

そんな悩みを持つ方も多いのではないでしょうか？

この記事では、アコーディオンメニューの基本から実践的な実装方法まで、初心者にもわかりやすく解説します。
コピペするだけで実装できるコードも用意していますので、ぜひ最後までご覧ください。

詳しく解説していますので、コードだけほしい方は最後の「完成コード」までスクロールしてください。

見本

今回は下記のようなアコーディオンメニューを作っていきます。

See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.

ポイントは下記になります。

  • クリックで開閉する
  • スムーズなアニメーション付き
  • シンプルで使いやすいデザイン
  • 複数のアコーディオンに対応

アコーディオンメニューの見た目の制作

HTML

<!-- アコーディオン -->
<div class="accordion">
  <div class="accordion-item js-accordion">
    <div class="accordion-header js-accordion-header">
      <p class="accordion-title">質問1：アコーディオンとは？</p>
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <div class="accordion-content__inner">
        <p>アコーディオンとは、クリックすることで開閉するUIパーツのことです。よくあるFAQなどで使用されます。</p>
      </div>
    </div>
  </div>

  <div class="accordion-item js-accordion">
    <div class="accordion-header js-accordion-header">
      <p class="accordion-title">質問2：どんな時に使う？</p>
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <div class="accordion-content__inner">
        <p>FAQページやメニュー、商品の詳細情報など、情報を整理して表示したい時に便利です。</p>
      </div>
    </div>
  </div>
</div>

まずはHTMLですが、それぞれの要素について解説します。

  1. アコーディオンのアイテム
  • accordion-item: 各アコーディオンの親要素
  • js-accordion: JavaScriptで操作するためのクラス
  1. ヘッダー部分（クリックする部分）
  • accordion-header: スタイリングのためのクラス
  • js-accordion-header: クリックイベントを設定するためのクラス
  • accordion-icon: 開閉を示す矢印アイコン用のクラス
  1. コンテンツ部分（開閉する部分）
  • accordion-content: 開閉する内容を含む要素
  • accordion-content__inner: 実際のコンテンツを含む内部要素

CSS実装

/*=========================================
#accordion
=========================================*/
.accordion-item {
    border-bottom: 1px solid #e8e8e8;
}

/* ヘッダー部分 */
.accordion-header {
    position: relative;
    padding: 20px 40px 20px 0;
    cursor: pointer;
}

.accordion-title {
    font-weight: bold;
}

/* 開閉アイコン */
.accordion-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.accordion-icon::before,
.accordion-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #333333;
    transition: transform .3s;
}

/* 縦線 */
.accordion-icon::before {
    width: 2px;
    height: 16px;
    margin-left: -1px;
    transform: translateY(-50%);
}

/* 横線 */
.accordion-icon::after {
    width: 16px;
    height: 2px;
    margin-top: -1px;
    transform: translateX(-50%);
}

/* 開いているときは縦線を非表示に */
.accordion-item.is-active .accordion-icon::before {
    transform: translateY(-50%) rotate(90deg);
}

/* コンテンツ部分 */
.accordion-content {
    height: 0;
    overflow: hidden;
    transition: height .3s;
}

.accordion-content__inner {
    padding: 0 0 20px;
}

主要なポイントを以下に解説します。

  1. 基本的なスタイリング
  • border-bottomで区切り線を表示
  • padding で適切な余白を設定
  1. 開閉アイコン（＋マーク）の作成
  • ::before と ::after で縦線と横線を作成
  • transition で回転アニメーションを設定
  • is-active 時に縦線を90度回転させて非表示に
  1. コンテンツの開閉アニメーション
  • height: 0 と overflow: hidden で初期状態は非表示
  • transition で開閉をアニメーション化
  • JavaScriptで要素の高さを動的に設定

アコーディオンメニューの動きの制作

見た目が完成したので、次は動きをつけてアコーディオンの開閉ができるようにしていきます。

JavaScriptの完成コード

/*=========================================
#アコーディオンメニュー
=========================================*/
const accordions = document.querySelectorAll('.js-accordion');

accordions.forEach(accordion => {
  const accordionHeader = accordion.querySelector('.js-accordion-header');
  const accordionContent = accordion.querySelector('.accordion-content');

  accordionHeader.addEventListener('click', () => {
    // アコーディオンの開閉状態を切り替え
    accordion.classList.toggle('is-active');

    // コンテンツの高さを設定
    if (accordion.classList.contains('is-active')) {
      accordionContent.style.height = accordionContent.children[0].clientHeight + 'px';
    } else {
      accordionContent.style.height = '0';
    }
  });
});

上記コードは、アコーディオンメニューの開閉を制御するためのものです。

主要な部分を解説します。

  1. 要素の取得
const accordions = document.querySelectorAll('.js-accordion');
  • ページ内の全てのアコーディオンを取得
  1. 各アコーディオンに対するイベント設定
accordions.forEach(accordion => {
  const accordionHeader = accordion.querySelector('.js-accordion-header');
  const accordionContent = accordion.querySelector('.accordion-content');
  • 各アコーディオンのヘッダーとコンテンツ部分を取得
  1. クリックイベントの処理
accordionHeader.addEventListener('click', () => {
  // クラスの切り替え
  accordion.classList.toggle('is-active');

  // 高さの設定
  if (accordion.classList.contains('is-active')) {
    accordionContent.style.height = accordionContent.children[0].clientHeight + 'px';
  } else {
    accordionContent.style.height = '0';
  }
});
  • クリック時にis-activeクラスを切り替え
  • コンテンツの実際の高さを計算して設定
  • 閉じる時は高さを0に設定

完成コード

以下は完成後のコードです。

HTML

<!-- アコーディオン -->
<div class="accordion">
  <div class="accordion-item js-accordion">
    <div class="accordion-header js-accordion-header">
      <p class="accordion-title">質問1：アコーディオンとは？</p>
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <div class="accordion-content__inner">
        <p>アコーディオンとは、クリックすることで開閉するUIパーツのことです。よくあるFAQなどで使用されます。</p>
      </div>
    </div>
  </div>

  <div class="accordion-item js-accordion">
    <div class="accordion-header js-accordion-header">
      <p class="accordion-title">質問2：どんな時に使う？</p>
      <span class="accordion-icon"></span>
    </div>
    <div class="accordion-content">
      <div class="accordion-content__inner">
        <p>FAQページやメニュー、商品の詳細情報など、情報を整理して表示したい時に便利です。</p>
      </div>
    </div>
  </div>
</div>

CSS

/*=========================================
#accordion
=========================================*/
.accordion-item {
    border-bottom: 1px solid #e8e8e8;
}

/* ヘッダー部分 */
.accordion-header {
    position: relative;
    padding: 20px 40px 20px 0;
    cursor: pointer;
}

.accordion-title {
    font-weight: bold;
}

/* 開閉アイコン */
.accordion-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.accordion-icon::before,
.accordion-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #333333;
    transition: transform .3s;
}

/* 縦線 */
.accordion-icon::before {
    width: 2px;
    height: 16px;
    margin-left: -1px;
    transform: translateY(-50%);
}

/* 横線 */
.accordion-icon::after {
    width: 16px;
    height: 2px;
    margin-top: -1px;
    transform: translateX(-50%);
}

/* 開いているときは縦線を非表示に */
.accordion-item.is-active .accordion-icon::before {
    transform: translateY(-50%) rotate(90deg);
}

/* コンテンツ部分 */
.accordion-content {
    height: 0;
    overflow: hidden;
    transition: height .3s;
}

.accordion-content__inner {
    padding: 0 0 20px;
}

JavaScript

/*=========================================
#アコーディオンメニュー
=========================================*/
const accordions = document.querySelectorAll('.js-accordion');

accordions.forEach(accordion => {
  const accordionHeader = accordion.querySelector('.js-accordion-header');
  const accordionContent = accordion.querySelector('.accordion-content');

  accordionHeader.addEventListener('click', () => {
    // アコーディオンの開閉状態を切り替え
    accordion.classList.toggle('is-active');

    // コンテンツの高さを設定
    if (accordion.classList.contains('is-active')) {
      accordionContent.style.height = accordionContent.children[0].clientHeight + 'px';
    } else {
      accordionContent.style.height = '0';
    }
  });
});

まとめ

今回は簡単にアコーディオンメニューを作る方法を詳しく解説しました。

アコーディオンメニューは使う機会も非常に多いので、ぜひこの記事をブックマークして、すぐに見返すことができるようにしておくと便利です。

また、このブログでは他にもコーディングに関する記事を投稿していますので、あわせて参考にしてみてください。

関連記事

あわせて読みたい
【コピペで実装】初心者必見！モーダルウィンドウの実装方法 はじめに 「ポップアップで情報を表示したいけど、実装方法がわからない…」「アニメーションをつけたモーダルの作り方がわからない…」 そんな悩みを持つ方も多いのでは...
あわせて読みたい
【コピペで実装】初心者必見！ハンバーガーメニューの作り方 モダンなウェブデザインに欠かせないハンバーガーメニューは、スマートフォンやタブレットの普及により、今やほとんどのウェブサイトで見かける定番の要素となっていま...
コーディング
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次