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
- We are creating one anchor to add a hash
#hashLink
to the URL (Expands the content). - We are creating a second anchor inside of the second paragraph to remove that anchor and leave it empty (Collapses the content).
- 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.
- We are adding a
display: none;
to the element with idhashLink
so that it is hidden by default. - 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.
Top comments (8)
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?
CSS Transitions are always going to be faster/smoother than JS. Whether it's static or not, shouldn't make a difference.
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?
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!
Thanks!
I was trying to understand if there was a reason to not use it.
You may be right. Thanks for taking time to answer my questions!
Oh, nope! I always try and reach for plain CSS before JS for animations 👍🏼
Only 2 concerns I have with that approach, I suppose; and this is not because I want to downplay your solution at all.
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.With that said, it's amazing what CSS can do by itself! (Nothing new, I know...)
Really cool. You can do A LOT with just CSS.