Spoiler

Spoiler is a element that can hidden/showed by clicking on it. Most common approach is obviously to use JavaScript and handle click even to toggle visibility of spoiler, right?

But with modern CSS and i'm talking specifically about CSS3. It is no longer the only way.

Take a look at simple way to achieve it through CSS alone:

input.spoiler-button
    display: none
    &:checked ~ .spoiler
        display: none

I use Stylus syntax as it is pre-processor of my choice. But i believe you should be able to interpret it without an issue.

And here is simple HTML layout

<header>
    <label for="spoiler_id">Header</label>
</header>
<input id="spoiler_id" class="spoiler-button"/>
<section class=".spoiler">
    Something to hide
</section>

How it works

To put it simply our input acts like a toggle that controls behaviour of element .spoiler

By default .spoiler is not hidden. Yeah, i know it is supposed to be other way around, but logic would be the same anyway.

So when you click on label, which uses for to bound itself to input, it becomes checked.

Which immediately activates CSS rule input.spoiler-button ~ .spoiler as .spoiler is placed right after it. With that we just hide it through setting display: none.

When user clicks again, it is no longer checked and .spoiler is no longer affected by above mentioned rule.

Example

You can find example of how it is done in my online CV or see gif Just click over Senior Software Engineer and details of it will be hidden. Click again, and it is back. And you don't really need any JavaScript for that.

It is a hack

Yes, i cannot disagree on that. It doesn't change the fact that it works in normal browsers.

And of course you can say that JavaScript is more obvious and more portable. Again, i cannot disagree.

Still, it is better than usage of jQuery just for this purpose. Heck, native JavaScript solution is even more better.