使い方label
とcheckbox
入力
選択したアイテムを開いたままにして、切り替え可能にします。
.collapse{
cursor: pointer;
display: block;
background: #cdf;
}
.collapse + input{
display: none; /* hide the checkboxes */
}
.collapse + input + div{
display:none;
}
.collapse + input:checked + div{
display:block;
}
<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="checkbox">
<div>Content 1</div>
<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="checkbox">
<div>Content 2</div>
label
名前付きradio
入力の使用
チェックボックスと同様に、すでに開いているものを閉じるだけです。両方の入力で
使用します。name="c1" type="radio"
.collapse{
cursor: pointer;
display: block;
background: #cdf;
}
.collapse + input{
display: none; /* hide the checkboxes */
}
.collapse + input + div{
display:none;
}
.collapse + input:checked + div{
display:block;
}
<label class="collapse" for="_1">Collapse 1</label>
<input id="_1" type="radio" name="c1">
<div>Content 1</div>
<label class="collapse" for="_2">Collapse 2</label>
<input id="_2" type="radio" name="c1">
<div>Content 2</div>
tabindex
と_:focus
入力と同様にradio
、さらにキーを使用して状態をトリガーできTabます。
アコーディオンの外側をクリックすると、開いているすべてのアイテムが閉じます。
.collapse > a{
background: #cdf;
cursor: pointer;
display: block;
}
.collapse:focus{
outline: none;
}
.collapse > div{
display: none;
}
.collapse:focus div{
display: block;
}
<div class="collapse" tabindex="1">
<a>Collapse 1</a>
<div>Content 1....</div>
</div>
<div class="collapse" tabindex="1">
<a>Collapse 2</a>
<div>Content 2....</div>
</div>
使用する:target
radio
入力を使用するのと同様に、さらにTabと⏎キーを使用して操作できます
.collapse a{
display: block;
background: #cdf;
}
.collapse > div{
display:none;
}
.collapse > div:target{
display:block;
}
<div class="collapse">
<a href="#targ_1">Collapse 1</a>
<div id="targ_1">Content 1....</div>
</div>
<div class="collapse">
<a href="#targ_2">Collapse 2</a>
<div id="targ_2">Content 2....</div>
</div>
<detail>
タグとタグの使用<summary>
(純粋な HTML)
HTML5 の詳細タグと概要タグを使用して、CSS スタイルや Javascript なしでこの問題を解決できます。これらのタグは Internet Explorer ではサポートされていないことに注意してください。
<details>
<summary>Collapse 1</summary>
<p>Content 1...</p>
</details>
<details>
<summary>Collapse 2</summary>
<p>Content 2...</p>
</details>