ボタンクリックで全て閉じられるアコーディオンの作り方
ボタンクリックで全て閉じられるアコーディオンの作り方を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、「すべて閉じる」ボタンをクリックすると、開いている複数のアコーディオンをまとめて閉じられるUIを作成します。それぞれの項目も個別にクリックして開閉できるため、必要な内容を確認しながら、ボタン操作で一覧をまとめて閉じることができます。
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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルは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で利用できます。
コメント