CSSでアコーディオンを実装する

JavaScriptを使わず、CSSのみでアコーディオンを実装してみます。

サンプルコード

checkboxと隣接セレクタを使って実装します。

HTML

<div class="accordion-area">
	<label class="accordion-switch" for="acc01">アコーディオン1</label>
	<input type="checkbox" name="acc" id="acc01">
	<div class="accordion-body">アコーディオン1の内容</div>

	<label class="accordion-switch" for="acc02">アコーディオン2</label>
	<input type="checkbox" name="acc" id="acc02">
	<div class="accordion-body">アコーディオン2の内容</div>

	<label class="accordion-switch" for="acc03">アコーディオン3</label>
	<input type="checkbox" name="acc" id="acc03">
	<div class="accordion-body">アコーディオン3の内容</div>
</div>

CSS

.accordion-switch {
	display: block;
	padding: 10px;
	border-bottom: #666 1px solid;
	color: #fff;
	background: #333;
}
.accordion-switch + input {
	display: none;
}
.accordion-body {
	display: none;
	padding: 30px 10px;
	border-bottom: #666 1px solid;
}
.accordion-switch + input:checked + .accordion-body {
	display: block;
}

CSSでアコーディオンのデモページ

最初からアコーディオンを開いておきたい場合は、checkboxにcheckedを付与しておきます。

HTML

<div class="accordion-area">
	<label class="accordion-switch" for="acc01">アコーディオン1</label>
	<input type="checkbox" name="acc" id="acc01" checked>
	<div class="accordion-body">アコーディオン1の内容</div>

	<label class="accordion-switch" for="acc02">アコーディオン2</label>
	<input type="checkbox" name="acc" id="acc02" checked>
	<div class="accordion-body">アコーディオン2の内容</div>

	<label class="accordion-switch" for="acc03">アコーディオン3</label>
	<input type="checkbox" name="acc" id="acc03">
	<div class="accordion-body">アコーディオン3の内容</div>
</div>

CSSでアコーディオンのデモページ2

アコーディオンのどれか1つだけ開けるようにしたい場合、checkboxの代わりにradioを使います。

HTML

<div class="accordion-area">
	<label class="accordion-switch" for="acc01">アコーディオン1</label>
	<input type="radio" name="acc" id="acc01">
	<div class="accordion-body">アコーディオン1の内容</div>

	<label class="accordion-switch" for="acc02">アコーディオン2</label>
	<input type="radio" name="acc" id="acc02">
	<div class="accordion-body">アコーディオン2の内容</div>

	<label class="accordion-switch" for="acc03">アコーディオン3</label>
	<input type="radio" name="acc" id="acc03">
	<div class="accordion-body">アコーディオン3の内容</div>
</div>

CSSでアコーディオンのデモページ3