DEV Community

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

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

Enmanuel Durán on September 26, 2019

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 ...
Collapse
 
fcrozetta profile image
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?

Collapse
 
codenutt profile image
Jared

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

Collapse
 
fcrozetta profile image
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?

Thread Thread
 
codenutt profile image
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!

Thread Thread
 
fcrozetta profile image
Fernando Crozetta • Edited

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!

Thread Thread
 
codenutt profile image
Jared

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

Collapse
 
jdriviere profile image
J. Djimitry Rivière • Edited

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...)

Collapse
 
codenutt profile image
Jared

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