右方向に開くアコーディオンの作り方
右方向に開くアコーディオンの作り方を紹介します。このサンプルでは、見出しボタンをクリックすると、その項目に対応する内容がボタンの右側へ表示されるアコーディオンをHTML・CSS・JavaScriptで作成します。一般的な上下方向へ開閉するアコーディオンとは異なり、横方向のスペースを利用して補足情報を表示できる構成です。
サービス一覧や料金プラン、管理画面、サイドメニューなど、左側に項目を配置して右側に詳しい情報を表示したい場面で利用できます。それぞれの項目は個別に開閉でき、見出しをクリックすると右側へ内容が表示され、もう一度クリックすると閉じます。開閉状態に合わせて見出し右側の記号も「＋」から「－」へ切り替わるため、現在の状態を確認しやすい構成です。
HTMLでは見出しや表示内容を変更でき、CSSでは全体の横幅、見出しボタンの幅、余白、背景色、枠線、角丸、文字色などを調整できます。JavaScriptではクリックした項目へクラスを付け外しするシンプルな処理で開閉を実現しているため、仕組みを確認しながらカスタマイズしやすく、横方向に情報を展開するアコーディオンを実装したい場合に利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
見出しをクリックすると、内容がボタンの右側に表示されます。
各見出しをクリックしてください。クリックした項目の内容がボタンの右側に表示され、もう一度クリックすると閉じます。
コードをコピーして使おう！
<!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-right_wrap">
<!-- タイトル -->
<div class="accordion-open-right_title">
右方向に開くアコーディオン
</div>
<!-- 説明文 -->
<p class="accordion-open-right_text">
見出しをクリックすると、内容がボタンの右側に表示されます。
</p>
<!-- 1つ目の項目 -->
<div class="accordion-open-right_item">
<button class="accordion-open-right_button" type="button">
サービス詳細
</button>
<div class="accordion-open-right_content">
横方向のスペースを使って、ボタンの右側へ内容を表示できます。
</div>
</div>
<!-- 2つ目の項目 -->
<div class="accordion-open-right_item">
<button class="accordion-open-right_button" type="button">
料金プラン
</button>
<div class="accordion-open-right_content">
料金やオプションなどの補足情報を右方向へ表示できます。
</div>
</div>
<!-- 3つ目の項目 -->
<div class="accordion-open-right_item">
<button class="accordion-open-right_button" type="button">
お問い合わせ
</button>
<div class="accordion-open-right_content">
管理画面やサイドメニュー風のレイアウトにも利用できます。
</div>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTML、CSS、JavaScriptの3ファイルで構成されています。HTMLではタイトル、説明文、見出しボタン、右側へ表示する内容を配置し、CSSでは横並びのレイアウトや各項目のデザインを設定します。JavaScriptでは見出しをクリックしたときに対象項目へis-openクラスを付け外しし、内容をボタンの右側へ表示します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはアコーディオン全体を構成するファイルです。「右方向に開くアコーディオン」のタイトル、説明文、「サービス詳細」「料金プラン」「お問い合わせ」の見出し、それぞれの右側へ表示する内容を変更できます。項目を追加する場合は、見出しボタンと内容を含むaccordion-open-right_itemを追加します。
style.cssはアコーディオンの横方向レイアウトとデザインを設定するファイルです。display:flex;によって見出しボタンと内容を横並びにし、内容側へborder-leftを設定して境界を分かりやすくしています。全体の横幅、余白、背景色、枠線、角丸、見出しボタンの横幅や内側余白なども変更できます。
script.jsは各項目の開閉を行うファイルです。見出しボタンをクリックすると、そのボタンを含む項目のis-openクラスを切り替えます。is-openが付いた項目だけ右側の内容が表示され、もう一度クリックすると非表示になります。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。そのあとsample/index.htmlをブラウザで開いてください。「サービス詳細」「料金プラン」「お問い合わせ」の見出しをクリックすると、その項目に対応する内容がボタンの右側へ表示されます。もう一度同じ見出しをクリックすると内容が閉じます。
カスタマイズできる内容
index.htmlではタイトル、説明文、各見出し、右側へ表示する文章を変更できます。サービス一覧、料金説明、管理画面の補足情報など、横方向に詳細を表示したい内容へ置き換えられます。項目数もaccordion-open-right_itemを追加・削除することで変更できます。
style.cssではアコーディオン全体の最大横幅、余白、背景色、枠線、角丸、見出しボタンの横幅、各項目の間隔、内容部分の余白や境界線、文字色などを変更できます。「＋」「－」記号の色もCSSから変更できます。
数値調整
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;
各アコーディオン項目の角丸です。値を大きくすると丸みが強くなります。
width:180px;
見出しボタンの横幅です。値を大きくすると左側の見出し領域が広くなり、小さくすると右側の内容領域が広くなります。
padding:16px 18px;
見出しボタンの内側余白です。上下の16pxを大きくするとボタンが高くなり、左右の18pxを大きくすると文字と端の間隔が広がります。
padding:18px;
右側へ表示する内容部分の内側余白です。値を大きくすると文章と枠線の間隔が広がります。
line-height:1.8;
右側へ表示する内容の行間です。値を大きくすると行間が広がり、小さくすると詰まった表示になります。
コメント