DEV Community

3 Cool CSS Tricks to Impress Your Friends at Parties

Vitor Paladini on June 23, 2020

Wait, no one does that... But the tricks are still great, I swear. So let's start with an intro: My experience with CSS along all those years has...

Read full post

Roberto Tonino • Jun 23 '20

2020 goal: get a date with a girl by showing her these tricks

Borja Herrero • Jun 24 '20

Already updated my Tinder profile. Let's see how it goes 🤞

Madza • Jun 23 '20

Protip #1: It's easier if you use Tailwind

Karan Sharma • Jun 23 '20

Nice. I'll definitely try that.

Matthieu Cneude • Jun 24 '20 • Edited

Good tips! Thanks for that!

I wanted a show-on-click (third trick) for my blog, a while ago. My problem was: I wanted multiple show-on-click on one page.

The only solution I found was to give different ID for each hidden block / checkbox. Here's an example, in case somebody wanted to do the same thing: codepen.io/phantas0s/pen/dyGWLEb

Aaron Throckmorton • Jun 24 '20

If you nest the input element inside the label you don't need the for attribute anymore and the two are automatically linked. In theory, ymmv.

Matthieu Cneude • Jun 26 '20

Ooh. That's a good idea. Thanks for that.

Hoshi Holiday • Jun 23 '20

So cool!! Definitely looking forward to more of your articles!!

Vitor Paladini • Jun 23 '20

Thanks, Hoshi! You have know idea how this feedback made me happy 😄😄😄

I plan on posting something new every Tuesday so stay tuned!

Hoshi Holiday • Jun 23 '20

definitely!!! :)

Amin Arria • Jun 23 '20 • Edited

That 3rd trick 🤯

prkr32 • Jun 29 '20

Dumb question: I am trying to repeat the hidden/display divs with different clickable labels, but I can't get it to work properly. Every time you click any of the three labels, the first hidden div appears rather than the div associated with that label. I have tried changing the classes of the hidden divs to .example1, .example2, etc. and it still doesn't work properly. I think I need to change the label id or classes but I'm not sure how to do that...

Thanks so much for these tips! I have been looking for a simple way to display divs on click without JS for a while and this seems like a simple way!

Vitor Paladini • Jun 29 '20 • Edited

Hey, that was a great question. You are almost right, instead of changing classes you'd need to change the id and the for attribute of each label. Here's an example: codepen.io/vtrpldn/pen/WNrZzvd

prkr32 • Jun 29 '20

Wow, thanks so much! This works because the + example always opens the nearest .example, so we don't have to identify the different .examples by changing their class, right? Just weird to me that the id for the different checkboxes are now unique, but we don't have to change any of the CSS to reflect that uniqueness.

prkr32 • Jun 29 '20 • Edited

Dumb question: I am having a hard time repeating this for a few different hidden divs that display on click. Whenever I click any of the labels, only the first hidden div displays. Not quite sure how to fix it. I have tried making multiple .example classes (.example1, .example2, etc.) and that doesn't work either.

Thanks so much for this article though! I have been looking for an easy way to do trick number 3 without JS for a long time and this is a great find!