Text Fade / Read More

User 10077 Photo


Senior Advisor
1,096 posts

I've been trying to figure out if I can do a text fade with read more button using RSD and Foundation framework. Here's an example:
https://css-tricks.com/examples/ReadMoreFade/

The instructions for doing it with jQuery are here:
https://css-tricks.com/text-fade-read-more/

However, since RSD has a version of jQuery, I'd rather avoid the possible conflict between including another jQuery library. Is there a way to do it natively in Foundation?
ASK ME ANYTHING
I provide personalized help for Coffeecup Users including personal or group training for Site Designer, Web Form Builder and more via Zoom.
Email me at support@uscni.org or call 865-687-7698.

Did you know that Web Form Builder can be used for both simple and complicated forms and that it's not limited to the default fonts and buttons? Take a look at a form we developed for WindowTinting.com.
https://forms.windowtinting.com/forms/w … ppingcart/
User 2823310 Photo


Registered User
312 posts

Hi Brian,
No need to add another library foundation runs on jQuery so you would just add the script (inside script tags in the footer) and do the styling.
You could do this?
http://gordw.com/rsd/test/hover/index.html
That is done with foundation stuff data-toggle with some animation, I did it quick though. Next time I'd just use a button not a button link and probably play around more with the styling but it is an option?
User 244626 Photo


Registered User
811 posts

Here is a working version of the example. I always find Chirs Coyier's stuff interesting.....(and challenging)

I used a div to hold the button instead of another p.
Attachments:
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.