1つしか開かないアコーディオンを作る方法
1つしか開かないアコーディオンを作る方法を紹介します。このサンプルでは、見出しをクリックすると対応する内容が開き、すでに別の項目が開いている場合は自動で閉じる仕様になっています。HTML・CSS・JavaScriptだけで実装できるため、外部ライブラリを使用せずにシンプルなアコーディオンを作成したい場合に利用できます。
一度に表示される内容が1つだけになるため、FAQページ、お問い合わせページ、管理画面の設定一覧、ECサイトの商品説明など、多くの情報を整理して見やすく表示したい場面に適しています。どの項目が開いているのか分かりやすく、長いページでも情報を探しやすくなるのが特長です。
コードはHTML・CSS・JavaScriptのみで構成されているため、そのままコピペして利用できます。表示する項目数やタイトル、本文はHTMLを書き換えるだけで簡単に変更できるので、用途に合わせてカスタマイズしやすいサンプルです。レスポンシブにも対応しているため、スマートフォン・タブレット・PCでも利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
新しい項目を開くと、開いていた項目は自動で閉じます。
見出しをクリックすると、その項目だけが開く動作を確認できます。
コードをコピーして使おう！
<!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>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは3つのアコーディオン項目を配置し、CSSでは見出しや本文、開閉記号、余白、角丸、レスポンシブ表示を設定します。JavaScriptではクリックされた項目だけを開き、別の項目を開いたときにそれまで開いていた項目を自動で閉じる処理を行います。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはアコーディオン全体を構成するファイルです。タイトル、説明文、各見出し、開いたときに表示する本文を変更できます。現在は「アコーディオンとは？」「このサンプルの特徴」「利用シーン」の3項目を配置しています。
style.cssはアコーディオン全体のデザインを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、見出しの文字サイズ、右側の「＋」「－」記号、本文の表示部分などを変更できます。
script.jsはアコーディオンの開閉を制御するファイルです。見出しをクリックすると、最初にすべての項目からis-openクラスを削除し、そのあとクリックした項目だけへis-openクラスを付けます。すでに開いている項目をもう一度クリックした場合は、その項目も閉じます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。3つのファイルを保存したあと、sample/index.htmlをブラウザで開いてください。見出しをクリックすると対応する本文が表示されます。別の見出しをクリックすると、現在開いている項目は自動で閉じ、新しく選択した項目だけが開きます。同じ見出しをもう一度クリックすると、すべて閉じた状態になります。
カスタマイズできる内容
index.htmlではタイトル、説明文、アコーディオンの見出し、開いたときに表示する本文を変更できます。項目を増やしたい場合は、one-open-accordion_itemのまとまりを同じ構成で追加できます。JavaScriptはすべてのone-open-accordion_buttonを取得して処理するため、同じクラス構成で追加した項目も1つだけ開く動作になります。
style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、見出しの高さや文字サイズ、本文の余白、「＋」「－」記号の色やサイズを変更できます。スマートフォン用の余白もmedia query内から調整できます。
script.jsでは「別の項目を開いたら、それまで開いていた項目を閉じる」という動作を実装しています。クリックした項目がすでに開いている場合は再び開かないため、そのまま閉じた状態になります。
数値調整
style.css
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
アコーディオン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
アコーディオン全体の角丸です。値を大きくすると丸みが強くなります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると最初のアコーディオン項目との間隔が広がります。
margin:0 0 12px;
各アコーディオン項目の下側余白です。12pxを大きくすると項目同士の間隔が広がります。
border-radius:12px;
各アコーディオン項目の角丸です。値を大きくすると丸みが強くなります。
min-height:52px;
見出しボタンの最小高さです。値を大きくすると見出し部分が高くなります。
padding:16px 18px;
見出しボタンの内側余白です。上下16px、左右18pxを変更すると見出し内の余白を調整できます。
margin-left:16px;
見出し文字と「＋」「－」記号の間隔です。値を大きくすると記号が文字から離れます。
font-size:22px;
「＋」「－」記号の文字サイズです。値を大きくすると記号が大きく表示されます。
padding:0 18px 18px;
開いた本文の左右と下側の余白です。値を変更すると本文と枠線の間隔を調整できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅が狭くなるとアコーディオン全体も自動で縮小します。また、640px以下ではbodyの余白を24px 12px、アコーディオン全体の余白を24px 18pxへ変更しています。スマートフォン・タブレット・PCで利用できます。
コメント