Learn how to show and hide elements using only CSS with the :target pseudo-class, no JavaScript needed for simple interactions.

Intro

Let's say that you have a button on which you want to click and perform a simple action like displaying some hidden content.
You'll directly think:

const btn = document.getElementById("btn")
btn.addEventListener("click", () => {
    // display my hidden content...
})

What if I tell you that you could do it with CSS?!

The:target CSS pseudo-class

While surfing the net, you surely clicked before on a hash-link, a link that redirects to a particular section in a page, just like the above Intro heading!
It could also redirect to another page, but always to a particular target on the page.
The target in this case is reached by a link with a hash #:

<a href="#intro">Intro</a>

This is why we call it a hash-link.

CSS has a :target pseudo-class, that can be used to select a target and style it!
Are you already thinking about the display property? 😉 Let's do it!

Reveal the code!

<a href="#the-code">Reveal the code!</a>

<div id="the-code">
    <p>This block of code is displayed after you click on the link</p>

    <a href="#hide-the-code">Hide the code!</a>
</div>

#the-code {
    display: none;
}

#the-code:target {
    display: block;
}

So how does this work?!
It's quite simple:

1. We have a hash-link:

<a href="#the-code">Reveal the code!</a>

2. We have a div with an ID matching the hash-link:

<div id="the-code">...</div>

3. We hide this div by default:

#the-code {
    display: none;
}

4. Then we display it if the hash-link becomes the target:

#the-code:target {
    display: block;
}

I've also added at the end of the div a hash-link that doesn't correspond to any target:

<a href="#hide-the-code">Hide the code!</a>

When this one is clicked, the target is changed and the block of code goes back to it's original state, hidden, since this hash-link doesn't match it's ID.

Hope you'll find it useful.

Note: The background image is a photo by NITISH GOSWAMI.