Is there a way to keep Collapse 2 directly under Collapse 1 when Content 1 is displayed? I attempted to reorganize the code, but it resulted in chaos. :D
.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>