dimanche 1 novembre 2015

CSS checkbox hack with non-sibling content

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.

DEMO

<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