アコーディオン開閉時に矢印アイコンが回転アニメーション【コピペで完結】

1つしか開かないアコーディオンを作る方法

1つしか開かないアコーディオンを作る方法を紹介します。このサンプルでは、見出しをクリックすると対応する内容が開き、すでに別の項目が開いている場合は自動で閉じる仕様になっています。HTML・CSS・JavaScriptだけで実装できるため、外部ライブラリを使用せずにシンプルなアコーディオンを作成したい場合に利用できます。

一度に表示される内容が1つだけになるため、FAQページ、お問い合わせページ、管理画面の設定一覧、ECサイトの商品説明など、多くの情報を整理して見やすく表示したい場面に適しています。どの項目が開いているのか分かりやすく、長いページでも情報を探しやすくなるのが特長です。

コードはHTML・CSS・JavaScriptのみで構成されているため、そのままコピペして利用できます。表示する項目数やタイトル、本文はHTMLを書き換えるだけで簡単に変更できるので、用途に合わせてカスタマイズしやすいサンプルです。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

1つしか開かないアコーディオン

新しい項目を開くと、開いていた項目は自動で閉じます。

クリックすると内容を表示・非表示に切り替えられるUIです。

常に1つだけ開き、別の項目を開くと前の項目は自動で閉じます。

FAQ、お問い合わせ、商品説明、管理画面などで利用できます。

見出しをクリックすると、その項目だけが開く動作を確認できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>1つしか開かないアコーディオン</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- アコーディオン全体 -->
  <div class="one-open-accordion_wrap">

    <!-- タイトル -->
    <div class="one-open-accordion_title">
      1つしか開かないアコーディオン
    </div>

    <!-- 説明文 -->
    <p class="one-open-accordion_text">
      新しい項目を開くと、開いていた項目は自動で閉じます。
    </p>

    <!-- アコーディオン1 -->
    <div class="one-open-accordion_item">

      <!-- 開閉ボタン -->
      <button
        class="one-open-accordion_button"
        type="button">
        アコーディオンとは？
      </button>

      <!-- 開閉する内容 -->
      <div class="one-open-accordion_content">
        クリックすると内容を表示・非表示に切り替えられるUIです。
      </div>

    </div>

    <!-- アコーディオン2 -->
    <div class="one-open-accordion_item">

      <!-- 開閉ボタン -->
      <button
        class="one-open-accordion_button"
        type="button">
        このサンプルの特徴
      </button>

      <!-- 開閉する内容 -->
      <div class="one-open-accordion_content">
        常に1つだけ開き、別の項目を開くと前の項目は自動で閉じます。
      </div>

    </div>

    <!-- アコーディオン3 -->
    <div class="one-open-accordion_item">

      <!-- 開閉ボタン -->
      <button
        class="one-open-accordion_button"
        type="button">
        利用シーン
      </button>

      <!-- 開閉する内容 -->
      <div class="one-open-accordion_content">
        FAQ、お問い合わせ、商品説明、管理画面などで利用できます。
      </div>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20pxの余白 */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* 基本文字色 */
  font-family:sans-serif; /* 使用フォント */
}

/* アコーディオン全体 */
.one-open-accordion_wrap{
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:700px; /* 最大横幅：値を大きくすると全体が広がる */
  margin:40px auto; /* 上下40px・左右中央配置 */
  padding:32px; /* 内側余白 */
  border:1px solid #e5e7eb; /* 外枠 */
  border-radius:18px; /* 角丸 */
  background:#f8fafc; /* 背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.one-open-accordion_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* 文字色 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 文字の太さ */
  line-height:1.5; /* 行間 */
  text-align:center; /* 中央揃え */
}

/* 説明文 */
.one-open-accordion_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  line-height:1.8; /* 行間 */
  text-align:center; /* 中央揃え */
}

/* 各アコーディオン項目 */
.one-open-accordion_item{
  margin:0 0 12px; /* 項目同士の下側余白 */
  border:1px solid #e5e7eb; /* 枠線 */
  border-radius:12px; /* 角丸 */
  overflow:hidden; /* 角丸の外へ内容がはみ出さないようにする */
  background:#ffffff; /* 背景色 */
}

/* 最後のアコーディオン項目 */
.one-open-accordion_item:last-child{
  margin-bottom:0; /* 最後の項目だけ下側余白を削除 */
}

/* アコーディオンを開閉するボタン */
.one-open-accordion_button{
  display:flex; /* 文字と記号を横並びにする */
  align-items:center; /* 縦方向を中央揃え */
  justify-content:space-between; /* 文字と記号を左右へ配置 */
  width:100%; /* 項目の横幅いっぱいに表示 */
  min-height:52px; /* タップしやすい最小高さ */
  padding:16px 18px; /* 上下16px・左右18pxの内側余白 */
  border:none; /* ブラウザ標準の枠線を削除 */
  background:#ffffff; /* 背景色 */
  color:#111827; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 文字の太さ */
  line-height:1.5; /* 行間 */
  text-align:left; /* 文字を左揃え */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* ボタン右側のプラス記号 */
.one-open-accordion_button::after{
  content:"＋"; /* 閉じている状態の記号 */
  flex-shrink:0; /* 記号が縮まないようにする */
  margin-left:16px; /* 文字と記号の間隔 */
  color:#0b6bff; /* 記号の色 */
  font-size:22px; /* 記号のサイズ */
  font-weight:700; /* 記号を太字にする */
}

/* 開いている項目のマイナス記号 */
.one-open-accordion_item.is-open .one-open-accordion_button::after{
  content:"－"; /* 開いている状態の記号 */
}

/* アコーディオンの内容 */
.one-open-accordion_content{
  display:none; /* 初期状態では非表示 */
  padding:0 18px 18px; /* 左右18px・下側18pxの内側余白 */
  color:#4b5563; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  line-height:1.8; /* 行間 */
}

/* 開いているアコーディオンの内容 */
.one-open-accordion_item.is-open .one-open-accordion_content{
  display:block; /* 内容を表示 */
}

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* ページ全体 */
  body{
    padding:24px 12px; /* スマートフォン用に余白を縮小 */
  }

  /* アコーディオン全体 */
  .one-open-accordion_wrap{
    margin:24px auto; /* 上下余白を24pxへ変更 */
    padding:24px 18px; /* 内側余白を縮小 */
  }

}

// アコーディオンの開閉ボタンをすべて取得
const oneOpenAccordionButtons=document.querySelectorAll(
  ".one-open-accordion_button"
);

// 各ボタンへクリック処理を設定
oneOpenAccordionButtons.forEach(function(button){

  // ボタンをクリックした時
  button.addEventListener("click",function(){

    // クリックしたボタンの親要素を取得
    const currentItem=button.parentElement;

    // クリックした項目が開いているか確認
    const isOpen=currentItem.classList.contains("is-open");

    // すべてのアコーディオン項目を取得
    const oneOpenAccordionItems=document.querySelectorAll(
      ".one-open-accordion_item"
    );

    // 開いているすべての項目を閉じる
    oneOpenAccordionItems.forEach(function(item){
      item.classList.remove("is-open");
    });

    // クリック前に閉じていた場合だけ開く
    if(!isOpen){
      currentItem.classList.add("is-open");
    }

  });

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成された、1つしか開かないアコーディオンです。HTMLでアコーディオンの構造を作成し、CSSでデザインやレイアウトを整え、JavaScriptで常に1つだけ開く開閉処理を実装しています。外部ライブラリを使用していないため、そのままコピーしてブラウザで動作を確認できます。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.html はアコーディオンの構造や見出し、本文を記述するファイルです。項目数や表示内容を自由に変更できます。
style.css は背景色、文字色、余白、角丸、ボタンなど見た目全体を設定します。
script.js はクリックされた項目だけを開き、それまで開いていた項目を自動で閉じる処理を担当します。

設置方法・使い方
sample フォルダ内へ3つのファイルを配置し、sample/index.html をブラウザで開くだけで利用できます。HTMLを書き換えることでFAQ、お問い合わせページ、商品説明、管理画面など、さまざまな用途へ利用できます。

カスタマイズできる内容
index.html を編集すると、アコーディオンの項目数、タイトル、本文を変更できます。style.css を編集すると、背景色、文字色、ボタンデザイン、余白、枠線、角丸など見た目を自由に変更できます。必要に応じて項目を追加・削除することも可能です。

数値調整
style.css の max-width:700px; はアコーディオン全体の最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。
padding:32px; や padding:16px 18px; は余白を調整します。値を変更すると全体やボタン内の余白が変わります。
font-size:22px; や font-size:16px; は文字サイズを変更できます。タイトルや本文、ボタンの大きさを調整したい場合に利用できます。
border-radius:18px; や border-radius:12px; は角丸の大きさです。値を大きくすると丸みが強くなり、小さくすると角張ったデザインになります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.css の width:100%; と max-width:700px; により画面幅に応じて横幅が自動調整されます。また、メディアクエリでスマートフォン向けの余白を設定しているため、スマートフォン・タブレット・PCでもレイアウトが崩れず快適に利用できます。