Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by nfs
nfs
35,526 Points

How to Add a show more/ show less button with CSS animations?

long blocks of texts are sometimes boring for a site... Any idea on how to add a button so that a long chunk of text can be hidden and then can be shown when a certain button is clicked? pure CSS is better for me, but if there is an awesome plugin for that, then you are more than welcome to share.

Thank you very much for your time.

3 Answers

Patrik Horváth
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

there is a ton of way doing it

  • by hiding paragraph and then just show it by button ( target for example )
  • seting font size to 0 and then just set it to normal also max-height and opacity to 0
  • ......

another example : just make function in PHP if your site is dynamic and just if string is longer then 100 chars give 100 chars in P tag then put button with you can click and :target css property and then make P tag with class HIDDEN

this is just example you wanna be programmer so think little bit then write STEPS in your FILE and then bring it to LIVE :smile:

and a lot of moreee by css and by JS even more

Patrik Horváth
Patrik Horváth
11,110 Points
Patrik Horváth
Patrik Horváth
11,110 Points

and adding transition or keyframes is 1 min work after this

Aaron Goodrum
Aaron Goodrum
9,660 Points
Aaron Goodrum
Aaron Goodrum
9,660 Points

Here a good example of what you're trying to do.

https://codepen.io/Idered/pen/AeBgF

nfs
nfs
35,526 Points
nfs
nfs
35,526 Points

Dear Patrik Horváth, and Aaron Goodrum, Thank you very much for your quick response. I'll definitely consider the approach you mentioned, Patrik, when I'll be taking the PHP course. Maybe it would be very helpful when creating a dynamic website. You see, at the moment, my skills are limited to only HTML CSS and javascript ( a little bit ). So, cannot do that right now.

On the other hand, @Aaron Goodrum, I really liked the pen. Thank you very much for that. Now I need to add CSS transitions to the paragraph to make it more smooth as the lists in the pen...

One more thing to ask, is there any course/ workshop/ video specifically related to this on Treehouse? Cuz, that would be great.