Ajax Loader
×

CSS Only Show/Hide

A very amazing CSS-only Show/Hide effect created by @genelocklin. It uses checkbox as the "Read More" button. When clicked (or checked), the image's and section's width is changed to 100%. There are two sections initially with the second one hidden. So, on clicking the checkbox, all the sections are made visible and hence it makes it look like that the text is expanded.

A very clever trick which can be used practically in your projects.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

5 Comments

× New

Sign In to comment

prman:

I'd love to know how to have more than one article per page. Anyone figure it out yet?

Amandavz:

I created a unique id for each checkbox and so forth and assigned a class called .readmore to the label element to style the checkbox. I replaced the [for="readmore"] with the class name .read_more in CSS and it worked.

Amandavz:

Hi, thank you so much for this. It worked 100% for my project but I would also like to know - how do I do this for more than 1 article? Please help. Thank you.

jimylove86:

hello sir how are you? i have a little problem for example if i have 4 article use the button without repeat the code 4 time thanks

CosminModoran:

Hey! I need your help! How do i do if i need to use this for more than 1 article? I don't want to put for every single article a css for every id. How can i make a general to use in every case ?

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+