The following CSS checkbox hack works under the assumption that the content is a sibling of the checkbox. When the label is clicked, the content is toggled.
<input id="checkbox" type="checkbox" />
<label for="checkbox">
Toggle content
</label>
<div class="content">Content here</div>
#checkbox {
display: none;
}
#checkbox:not(:checked) ~ .content {
display: none;
}
Can the same effect be achieved using CSS only if the content is not a sibling of the checkbox? For example:
<div>
<input id="checkbox" type="checkbox" />
<label for="checkbox">
Toggle content
</label>
</div>
<div class="content">Content here</div>
Aucun commentaire:
Enregistrer un commentaire