Show hide divs on click in HTML and CSS without jQuery
Using label
and checkbox
input
Keeps the selected item opened and togglable.
.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>
Using label
and named radio
input
Similar to checkboxes, it just closes the already opened one.
Use name="c1" type="radio"
on both inputs.
.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>
Using tabindex
and :focus
Similar to radio
inputs, additionally you can trigger the states using the Tab key.
Clicking outside of the accordion will close all opened items.
.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>
Using :target
Similar to using radio
input, you can additionally use Tab and ⏎ keys to operate
.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>
Using <detail>
and <summary>
tags (pure HTML)
You can use HTML5's detail and summary tags to solve this problem without any CSS styling or Javascript. Please note that these tags are not supported by Internet Explorer.
<details>
<summary>Collapse 1</summary>
<p>Content 1...</p>
</details>
<details>
<summary>Collapse 2</summary>
<p>Content 2...</p>
</details>
You can use a checkbox
to simulate onClick with CSS:
input[type=checkbox]:checked + p {
display: none;
}
JSFiddle
Adjacent sibling selectors