下方向に開くアコーディオンの作り方
下方向に開くアコーディオンの作り方を紹介します。このサンプルでは、見出しをクリックすると、その見出しの下側に内容が表示される基本的なアコーディオンを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="accordion-open-downward_wrap">
<!-- タイトル -->
<div class="accordion-open-downward_title">
下方向に開くアコーディオン
</div>
<!-- 説明文 -->
<p class="accordion-open-downward_text">
見出しをクリックすると、内容が見出しの下側に表示されます。
</p>
<!-- 1つ目の項目 -->
<div class="accordion-open-downward_item">
<button class="accordion-open-downward_button" type="button">
アコーディオンとは？
</button>
<div class="accordion-open-downward_content">
クリックした項目の内容を、見出しの下側に表示できるUIです。
</div>
</div>
<!-- 2つ目の項目 -->
<div class="accordion-open-downward_item">
<button class="accordion-open-downward_button" type="button">
どんな場面で使う？
</button>
<div class="accordion-open-downward_content">
FAQや説明文など、必要な内容だけを開いて確認したい場所で使えます。
</div>
</div>
<!-- 3つ目の項目 -->
<div class="accordion-open-downward_item">
<button class="accordion-open-downward_button" type="button">
必要なファイルは？
</button>
<div class="accordion-open-downward_content">
HTML、CSS、JavaScriptの3つのファイルで作成できます。
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML、CSS、JavaScriptの3ファイルで構成されています。HTMLではタイトル、説明文、見出しボタン、開閉する内容を配置し、CSSではアコーディオン全体のデザインや各項目の表示を設定します。JavaScriptでは見出しをクリックしたときに対象項目へクラスを付け外しし、内容を見出しの下方向へ開閉します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはアコーディオン全体を構成するファイルです。「下方向に開くアコーディオン」のタイトル、説明文、各項目の見出し、開いたときに表示する内容を変更できます。項目を追加する場合は、見出しボタンと内容を含むaccordion-open-downward_itemを追加します。
style.cssはアコーディオンのデザインを設定するファイルです。全体の横幅や余白、背景色、枠線、角丸、見出しボタンのサイズ、文字色、＋・－記号などを変更できます。閉じている内容はdisplay:none;で非表示にし、is-openクラスが付いた項目だけdisplay:block;で表示します。
script.jsはアコーディオンの開閉を行うファイルです。各見出しボタンをクリックすると、そのボタンを含む項目のis-openクラスを切り替えます。これにより、クリックした項目だけを個別に開いたり閉じたりできます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。そのあとsample/index.htmlをブラウザで開いてください。アコーディオンの見出しをクリックすると、その見出しの下側へ内容が表示されます。もう一度同じ見出しをクリックすると内容が閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、各アコーディオンの見出し、開いたときに表示する文章を変更できます。FAQ、商品説明、サービス案内など、表示したい内容に合わせて文章や項目数を調整できます。
style.cssではアコーディオン全体の最大横幅、余白、背景色、枠線、角丸、見出しボタンの内側余白、文字色、＋・－記号の色などを変更できます。JavaScriptでは各見出しボタンに対してクリック処理を設定しており、クリックした項目ごとに開閉状態を切り替えます。
数値調整
style.css
max-width:700px;
アコーディオン全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
アコーディオン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
アコーディオン全体の内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
アコーディオン全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると最初のアコーディオンとの間隔が広がります。
margin-bottom:12px;
各アコーディオン項目の下側余白です。値を大きくすると項目同士の間隔が広がります。
border-radius:12px;
各アコーディオン項目の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:16px 18px;
見出しボタンの内側余白です。上下の16pxを大きくするとボタンが高くなり、左右の18pxを大きくすると文字と端の間隔が広がります。
padding:0 18px 18px;
開いた内容部分の内側余白です。左右と下側の18pxを変更すると、文章と項目の枠線との間隔が変わります。
line-height:1.8;
開いた内容部分の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって、画面幅に合わせてアコーディオン全体が縮小されます。また、画面幅640px以下ではpadding:24px 18px;へ変更して内側の余白を抑えているため、スマートフォン・タブレット・PCで利用できます。
コメント