Toggle content on click without javascript (Yes you read that right)

Originally posted on Enmascript.com

Usually every time we want to toggle content on a website on click we use javascript. In this article, we are going to explore a different way of doing this by just using CSS capabilities.

The power behind :target selector

Not many people know this but there is a fantastic pseudo-class that allows us to apply styles to elements when a specific hash link is present or not in an URL, the name of this pseudo-element is :target and it is the protagonist of this short article.

Straight to the point, let's toggle stuff

Based on the explanation above, you may now imagine what I am about to do, so let's do it:

First, let's create a base HTML structure

<div>
    <p>This is some expandable content.</p>

    <p id="hashLink">
        I have expanded like a Pufferfish.
        <a href="#">Please collapse this poor fish.</a>
    </p>
</div>

<a href="#hashLink">Expand</a>

and some CSS:

#hashLink {
    display: none;
}

#hashLink:target {
    display: block;
}

What are we doing here? let's explain

1. We are creating one anchor to add a hash #hashLink to the URL (Expands the content).
2. We are creating a second anchor inside of the second paragraph to remove that anchor and leave it empty (Collapses the content).
3. The content we want to toggle is contained within a paragraph that has an id equal to the hash we are going to be adding to the URL.
4. We are adding a display: none; to the element with id hashLink so that it is hidden by default.
5. We are adding a display: block; to the #hashLink:target selector, this is what makes the magic happen, when the hash is present in the URL this style gets applied, creating the effect of toggling on click.

There is no really much more to explain, as you see it is straightforward, if you want to see a live example check the codepen below.

See this Pen from Enmanuel for a live Demo LYPawYY
(@enmanuelduran) on CodePen.

This selector is powerful, be creative and feel free to post cool things you decide to do with it.

Also you should know that there are other ways to accomplish this like using a hidden checkbox and toggle content on checked state.

Comments

[Fernando Crozetta]

Not gonna lie. I think this is really cool
I don't know much about front end, but this is really interesting to see and understand.
I have just one question: would be any performance differenced if this was implemented in static sites, for example?

[Jared]

CSS Transitions are always going to be faster/smoother than JS. Whether it's static or not, shouldn't make a difference.

[Fernando Crozetta]

This is Interesting. May I ask more?
But if it's faster/smoother that js, is there a reason why people don't use it more?

[Jared]

I'm not sure what the answer to that is. Maybe because CSS is not often thought of like an animation solution? I dunno! CSS is also limited, you can't do everything. But you can do a lot!

[Fernando Crozetta]

Thanks!
I was trying to understand if there was a reason to not use it.

Maybe because CSS is not often thought of like an animation solution?

You may be right. Thanks for taking time to answer my questions!

[Jared]

Oh, nope! I always try and reach for plain CSS before JS for animations 👍🏼

[J. Djimitry Rivière]

Only 2 concerns I have with that approach, I suppose; and this is not because I want to downplay your solution at all.

1. Because it uses the href attribute, it seems to register the link history, which means if the user would need to go back one page, he'd have to click the back button of his browser a few times, which can be an annoying aspect for the short attention-spanned people.

1. Would it be a similar approach if one wanted to design a CSS-only tabular elements?

With that said, it's amazing what CSS can do by itself! (Nothing new, I know...)

[Jared]

Really cool. You can do A LOT with just CSS.