Show/Hide via Checkbox and CSS

Using hidden checkbox and CSS to control element visibility

Normally when we want to show/hide an element, we utilise jQuery...

<div id="trigger">Click Me</div>
<div id="showhide">Show/Hide</div>

$(function() {
  $("#trigger").on("click", function() {
    $("#showhide").toggle();
  });
});

The downside to this is when you start using responsive layouts, and you always want the element to be displayed in one state (e.g. desktop) but show/hide in a different state (e.g. mobile).  It is possible to end up in a situation where the item is hidden even in the state where you always want it visible.

I've recently seen a different way of doing it that gets around this problem, that uses hidden checkbox and pure CSS...

<div><label for="trigger">Click Me</label></div>
<input type="checkbox" id="trigger" style="display:none" />
<div id="showhide">Show/Hide</div>

#showhide { display:none; }
#trigger:checked ~ #showhide { display:block; }

The key here is ~ which effectively says "find the second part only if it is within the same parent as the first part and after the first part".