閉じるボタンで全て閉じられるアコーディオンの作り方
閉じるボタンで全て閉じられるアコーディオンの作り方を紹介します。このサンプルでは、複数のアコーディオンを個別に開閉できるだけでなく、専用の「すべて閉じる」ボタンをクリックすることで、開いている項目を一括で閉じられます。HTML・CSS・JavaScriptだけで実装でき、外部ライブラリは必要ありません。
よくある質問（FAQ）、商品説明、ヘルプページ、管理画面の設定一覧、お問い合わせページなど、複数の項目を表示する場面で便利です。閲覧後に一覧をすっきりした状態へ戻せるため、長いページでも見やすさを保ちながら利用できます。各項目は通常どおり個別に開閉でき、一括で閉じる操作も簡単に行えます。
タイトル、説明文、各見出し、本文、「すべて閉じる」ボタンの文字はHTMLから変更できます。CSSでは配色、余白、角丸、文字サイズなどを調整でき、JavaScriptでは一括で閉じる動作を実装しています。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用しやすいアコーディオンサンプルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
初期状態では全ての項目が開いています。「すべて閉じる」をクリックすると、開いている項目を一括で閉じられます。
デモを開いた時点では全ての項目が開いています。各見出しは個別に開閉でき、「すべて閉じる」をクリックすると全項目を一括で閉じます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>閉じるボタンで全て閉じられるアコーディオン</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- アコーディオン全体 -->
<div class="close-all-accordion_wrap">
<!-- タイトル -->
<div class="close-all-accordion_title">
閉じるボタンで全て閉じられるアコーディオン
</div>
<!-- 説明文 -->
<p class="close-all-accordion_text">
初期状態では全ての項目が開いています。「すべて閉じる」をクリックすると、開いている項目を一括で閉じられます。
</p>
<!-- 全て閉じるボタン -->
<button class="close-all-accordion_close-all" type="button">
すべて閉じる
</button>
<!-- 項目1 -->
<div class="close-all-accordion_item is-open">
<button class="close-all-accordion_button" type="button">
アコーディオンとは？
</button>
<div class="close-all-accordion_content">
アコーディオンは見出しごとに内容を開閉できるUIです。
</div>
</div>
<!-- 項目2 -->
<div class="close-all-accordion_item is-open">
<button class="close-all-accordion_button" type="button">
利用シーン
</button>
<div class="close-all-accordion_content">
FAQや設定画面など、情報を整理して表示したい場面で利用できます。
</div>
</div>
<!-- 項目3 -->
<div class="close-all-accordion_item is-open">
<button class="close-all-accordion_button" type="button">
必要なファイル
</button>
<div class="close-all-accordion_content">
HTML・CSS・JavaScriptのみで作成できます。
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。初期状態ではすべてのアコーディオンが開いており、「すべて閉じる」ボタンをクリックすると開いている項目を一括で閉じられます。また、各見出しは個別に開閉することもできます。JavaScriptではアコーディオンの開閉処理と一括で閉じる処理を担当しています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはアコーディオン全体の構造を作成するファイルです。タイトル、説明文、「すべて閉じる」ボタン、各見出し、表示内容を変更できます。初期状態で開いておきたい項目にはis-openクラスを付けています。
style.cssはアコーディオン全体のデザインを設定するファイルです。横幅、余白、背景色、枠線、角丸、文字サイズ、ボタンデザイン、開閉アイコンなどを変更できます。
script.jsは見出しをクリックしたときの開閉処理と、「すべて閉じる」ボタンをクリックしたときに開いている項目を一括で閉じる処理を行います。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。ページを開くとすべてのアコーディオンが開いた状態で表示されます。各見出しをクリックすると個別に開閉でき、「すべて閉じる」ボタンをクリックすると開いている項目をまとめて閉じられます。
カスタマイズできる内容
index.htmlではタイトル、説明文、「すべて閉じる」ボタンの文字、各見出し、表示内容を変更できます。項目数を増減したり、初期状態で開く項目を変更したりすることもできます。
style.cssでは全体の横幅、余白、背景色、文字色、ボタンの色、角丸、枠線、見出しのデザイン、開閉アイコンなどを自由に変更できます。
script.jsでは開閉処理や、一括で閉じる対象の項目を変更できます。
数値調整
style.css
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると余白が広がり、小さくすると詰まった表示になります。
border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
padding:12px 24px;
「すべて閉じる」ボタンの内側余白です。値を大きくするとボタン全体が大きくなります。
padding:16px 18px;
見出しボタンの内側余白です。値を変更するとクリック領域の大きさが変わります。
font-size:16px;
見出しボタンの文字サイズです。値を変更すると見出しの文字サイズが変わります。
font-size:22px;
開閉アイコン（＋・－）の文字サイズです。値を大きくするとアイコンが見やすくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより画面幅に合わせて横幅が調整されます。また、640px以下ではpadding:24px 18px;へ変更して余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。
コメント