DEV Community

loading...

Discussion on: 3 Cool CSS Tricks to Impress Your Friends at Parties

Collapse
prkr32 profile image
prkr32

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!

Collapse
vtrpldn profile image
Vitor Paladini Author • 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

Collapse
prkr32 profile image
prkr32

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.