<div class="accordion">
<div class="accordion--content">
<input id="accordion--content__one" class="accordion--content--toggle" type="radio" name="accordion" checked>
<label for="accordion--content__one" class="accordion--content--toggle--text">One</label>
<div class="accordion--content--body">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis, illo incidunt. Veniam, perferendis deleniti, itaque eligendi non ducimus animi quisquam velit odit tempore error. Explicabo unde laborum eos tenetur alias.
</div>
</div>
<div class="accordion--content">
<input id="accordion--content__two" class="accordion--content--toggle" type="radio" name="accordion">
<label for="accordion--content__two" class="accordion--content--toggle--text">Two</label>
<div class="accordion--content--body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, doloremque possimus velit temporibus nulla ex saepe harum sint enim aperiam iste accusamus placeat excepturi? Aut animi cupiditate possimus atque nulla.
</div>
</div>
<div class="accordion--content">
<input id="accordion--content__three" class="accordion--content--toggle" type="radio" name="accordion">
<label for="accordion--content__three" class="accordion--content--toggle--text">Three</label>
<div class="accordion--content--body">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi iste alias doloribus explicabo illum autem corporis atque eius, asperiores porro eligendi quos dolore, ipsum fuga dolorem fugiat deserunt laudantium ut.
</div>
</div>
</div>
.accordion--content {
/* each tab */
display: block;
}
.accordion--content--toggle,
.accordion--content--body {
/* content body and checkbox */
display: none;
}
.accordion--content--toggle:checked ~ .accordion--content--toggle--text {
/* active tab title */
color: #000;
background-color: #ccc;
border: none;
}
.accordion--content--toggle:checked ~ .accordion--content--body {
/* active tab body */
display: block;
background-color: #ccc;
}
.accordion--content--toggle--text {
/* tab title */
display: block;
background-color: #000;
color: #fff;
cursor: pointer;
font-size: 25px;
border-bottom: 1px solid #f5f5f5;
user-select: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.