How To Expand And Collapse Text In Divi (Like A Read More Toggle)

[@quitwithnancy282]

THANK YOU! ET removed a blog of this code and I could not for the life of me get the Read More to work from an old post. Your video and code worked great and really helped me understand the style changes.

[@gurushakti69]

This guy is a major contributor to the divi community. I wonder why he doesn't have any subscribers. Maybe we're missing some even more awesome content . Really great work Nelson. You are terrific when it comes to in depth learning aswell. A very reliable source.

[@theresasouthern8631]

13.K is no subscribers? lol

[@DrKrishnaThakur]

very less@@theresasouthern8631

[@justinjuk]

This is great! Using it on a testimonial module. I have 3 testimonies displayed on a home page and one of them is 3 paragraphs longer than the others. This is a cool way to balance them out until expanded.

[@ElevateSolutionsGroup]

Nelson at Pee-Aye Creative is the BEST! I use the whole suite of products for Divi and they are great. But more importantly, Nelson has a huge assortment of tips, training and how-to's to modify functions and make Divi even better. The way he presents is perfect for a "non-coder" like me! I highly recommend everything from Pee-Aye Creative!

[@PeeAyeCreative]

Thanks for sharing!! I really appreciate your kind words and hope you continue to find our resources valuable! 🙂

[@ultimatekv]

A client once asked me to add that option on a website using another Theme and I had to install a plugin to get that. Extremely glad that this can be done so easily on Divi without the use of a plugin. Thanks loads for the tutorial.

[@PeeAyeCreative]

You're welcome, this is definitely a fun one!

[@RehanRehhu]

Teachers should be like you

[@PeeAyeCreative]

You're welcome!

[@TheWannabeGeek]

Your channel is OUTSTANDING... Thank you so much. This has been a lifesaver for some content I am creating. Thank you so much!!!!

[@PeeAyeCreative]

You are so welcome! It's great to know my resources are helpful!

[@jenniferworldwide]

This worked like a gem! Excellent instructions!

[@PeeAyeCreative]

Great, so glad to hear that!

[@purenorthcreative8798]

Thanks so much I always find your tutorials excellent. Thanks

[@PeeAyeCreative]

You're very welcome!

[@artderfall]

It worked! The instructions were easy to follow. Thanks. Looks great without any code adjustment.

[@PeeAyeCreative]

Awesome, so glad to hear!

[@BeFoundOnTheWeb]

Nelson, you are so friggin awesome. I appreciate you!

[@PeeAyeCreative]

Thank you 😊

[@meriebotes]

This is exactly what I was after, thanks so much. You're a legend! Love your work.

[@PeeAyeCreative]

You're welcome! Glad it helped!

[@doeyehof]

I can do very interesting things in webdesign because of this man! Thanks you so much!

[@Th3Snipe]

Immedeate sub and like, your channel is just what I needed for my divi knowledge. You made me also see the importance of understanding the code instead of simple copy pasta. Thanks !

[@PeeAyeCreative]

Welcome aboard!

[@rickarden7731]

Works perfectly, I just used the blog module solution on a clieint site and they love it. I just made a few alterations to the gradient and font weight and transitions to fit my design. Much appreciated. Keep doing what your doing. Cheers!👍

[@sonamtshering2627]

Hello Nelson.. This is superb.. Your tutorials has made my work easier.. Love your teachings. Thank you so much.

[@PeeAyeCreative]

You are very welcome! I'm glad they help make your work easier!

[@josephabolling-thompson171]

Outstanding and well taught. Exactly what I needed.

[@PeeAyeCreative]

I'm so glad to hear that!

[@christrim320]

You sir are a champion, just what i needed

[@dindigitalehjlper4933]

You make really great tutorial videos, that have helped me multiple times. And you have a great likable way of communicating THANKS 🙂

[@PeeAyeCreative]

That's really nice to hear, thank you! 😊

[@noostuff3870]

Thank you Nelson - this was most helpful!

[@PeeAyeCreative]

I'm glad you like it!

[@andifoglia1098]

Thank you for sharing your knowledge!!! Truly grateful !

[@PeeAyeCreative]

You are welcome, my pleasure!

[@rickusjansenvanrensburg2643]

Nelson strikes again! Thank you, this helped a lot!

[@danielaleksandrov4491]

Thank you Nelson! Another amazing tutorial! Thank you so much!

[@coderplus362]

Very very Helpfull your tutorial, Thank you Brother

[@PeeAyeCreative]

You're welcome! I'm glad you like the tutorial.

[@vijayanandbommaji3521]

Thank you so much, this really helps! I was searching for plugins to solve this problem but got a plugin free solution. Kudos to you! Just FYI, I think you're already working on it, but the blog page of this one, is woggly(menu is not right, and the page is not scrollable), might be because of the divi update.

[@RandyK1ng]

Perfect, this works like a dream and looks great, too.

[@ur5847]

Works like a charm. 🙂 Thanx a lot.

[@PeeAyeCreative]

You're welcome!

[@JustinMatson]

This helped a ton, thanks!

[@PeeAyeCreative]

I'm glad to hear that!

[@vickytosh-morelli5303]

I was able to easily adapt this to a Testimonial block as well!

[@PeeAyeCreative]

Awesome, I had not tried that module but great to hear!

[@Mortimare77]

I noticed your comment was only 10 days old - I was wondering how you adapted the code to work with testimonials? I used a replace function to change blurb to testimonial in the code but it would never actually expand the testimonial block.

[@vickytosh-morelli5303]

@@Mortimare77 In the JS and CSS replace the blurb selector with ".et_pb_testimonial_description"

[@Mortimare77]

@@vickytosh-morelli5303 thanks for the reply! I did replace the blurb selector with testimonial :( I did an auto replace of "blurb" with "testimonial". In the selector for blurb it has ep_blurb_content and ep_blurb_description. (I replaced for, then each one separately, while deleting the other for testimonial and it didn't work.) Is there an extra one I need to add? (Ex) ep_testimonial_container or ep_testimonial_descrption_inner)?

[@vickytosh-morelli5303]

@@Mortimare77 Here's the code for the JS part: jQuery(document).ready(function() { var text_expand_text = "Expand To Read More"; var text_collapse_text = "Collapse To Read Less"; var text_expand_icon = "3"; var text_collapse_icon = "2"; jQuery(".pa-toggle-text").each(function() { jQuery(this).append('' + text_expand_text + ' ' + text_expand_icon + ''); jQuery(this).find(".pa-text-collapse-button").on("click", function() { jQuery(this).parent().siblings(".et_pb_testimonial_description").toggleClass("pa-text-toggle-expanded"); if (jQuery(this).parent().siblings(".et_pb_testimonial_description").hasClass("pa-text-toggle-expanded")) { jQuery(this).html(text_collapse_text + "" + text_collapse_icon + ""); } else { jQuery(this).html(text_expand_text + "" + text_expand_icon + ""); } }) }) })

[@christinaosborne4259]

Thank you. This was very helpful. Exactly what I needed. Much appreciated.

[@PeeAyeCreative]

You're very welcome!

[@dustinbalke9510]

This was GREAT!! Hit the nail spot on - much appreciated.

[@IAintYourMommaSantaMonica]

Love this, thank you!

[@PeeAyeCreative]

You're so welcome!

[@CRinderknecht]

You are a God send!! Whenever I need something, I should get in the habit of searching your videos first! I do have a question; if I want to add the text code, would I just add it to the Integrations/CSS also? Thank you again!

[@buddhikajayasingha1153]

Always helpful and reliable. Thanks man!

[@PeeAyeCreative]

You're welcome!

[@goddesskindled]

Thank you so much for this excellent tutorial!

[@MercadeoDigitalco]

Awesome!! thank you!!!

[@PeeAyeCreative]

You're welcome!

[@showbizvet]

Sweet, will give it a try. Question re Toggle. Is there a way to fade the color (if used) from a closed state to an open state? Right now I go from Blue to White and the change is TOO abrupt., I'd like it to fade if possible. Thanks for all your vids.

[@17aig]

Thank you so much for another great video.

[@PeeAyeCreative]

You're welcome!

[@NazreenDaud]

Thank you for this tutorial! Need it on time!

[@pixeltricks]

Thank you very much! :)

[@PeeAyeCreative]

You're welcome!

[@cherca5110]

Thank you !

[@PeeAyeCreative]

You're welcome!

[@drgoyal]

Excellent, great job!!

[@maartenbosch7707]

Hi PA, great tutorial. I would like to know if it also could be adapted for basic Divi accordion. Thanks in advance

[@PeeAyeCreative]

I'm not sure what you mean, as I think an accordion is the alternative. If you mean to put it inside the content of the accordion, I guess it could be adapted but seems confusing to a user.

[@elviebakes8579]

great tutorial. thank you so much. what code do i use if i want the color of the button black?

[@MateuszStrzeszewski]

Great tutorial, easy and customizable!

[@websitedesignsbylisa]

This was so very helpful! Thank you!

[@bennyfulltrack]

Hi Nelson, I've stumbled on this tutorial, awesome work mate, heaps thanks! I have a question though... Can it be only visible on mobile phone view so that the text stays visible on desktop view?

[@SamanthaStrachan-ge1os]

This video is great!! Really helped me minimize the space on my page. One issue I am having is I have 2 columns of text that I want to add this to but in order to have the 2 columns of text they have to be in 2 different modules and I applied this to both. Is there a way that I can create the "view all comments" drop-down for both so they don't have to expand one column and then the other?

[@irenaristic2812]

Thank you

[@PeeAyeCreative]

You're welcome!

[@Away_Education.nuayaweera]

thank you sir

[@PeeAyeCreative]

You're welcome!

[@spectacularfollies2265]

Great tutorial, Nelson! Could you add this to the Person module?

[@PeeAyeCreative]

Probably!

[@saskiabenedictus5817]

works nicely on my modules! I hve a question, though... it does not work on sections or rows... how can I make that work? So that a complete section can be expanded or collapsed? or actually multiple rows or modules at the same time? I would be very interested to know! Keep up the good work!

[@melissagreen2051]

This is exactly what I needed and it was so easy, thank you!

[@possibilitygenerator]

Hi, Thanks for the videos. When I was doing modifications in WordPress, pre-Divi, I could place a "Read More" exactly where I wanted it-- like after a specific couple of paragraphs. Here you show how to do by height but it isn't tailored to the content. Are we able to place a "Read More" somewhat via this method, but modified somehow, to an exact place in the text, which would be different for each text box where it is implemented? Thank you!

[@MohitPatel-lc7ly]

Thanks bro

[@PeeAyeCreative]

You're welcome!

[@cherylbrooks5078]

Great video! Thank you. Did anyone adapt this for Tabs? I'm getting errors.

[@ladydayification]

Yeaaaaah, It worked!

[@abdulrehman-xw3jo]

thanks for the code nelson, how we can do the same with a row not just module?

[@PeeAyeCreative]

I'll try to do a tutorial on that.

[@abdulrehman-xw3jo]

​@@PeeAyeCreative thanks man, but keep the same format, read more gradient with half content waiting to be revealed.

[@Bulbaritos]

How would I be able to use this in the "woo product description" in the divi builder?

[@timdetmer]

Awesome, you helped me achieve what I was hoping to do. ...almost. You showed us how to add this feature on a TEXT or BLURB. But how about on a TESTIMONIAL? I tried a find/replace with the blurb code in the CSS Snippet and jQuery to change "blurb" to TESTIMONIAL and “pa-toggle-testimonial” in the CSS Class input field It was kind of working, but not perfectly. This is almost two years old, do you have an update that includes this for testimonials? Or will it just not work with that?

[@timdetmer]

...anyway, I changed them all to text modules and gave up some of the features you get with a testimonial module and managed to get it working. The read more feature is pretty ubiquitous on the web now, you would think they would have it built in to the testimonial module by now. Thank you.

[@timdetmer]

but it would be nice to be able to do this for testimonial modules. Can it be done this way?

[@PeeAyeCreative]

This would work for any plugin that has a textarea, but will take modification accordingly for the module selectors.

[@Hgrewssauujdkhvcjjipp]

It's cool 🎉

[@PeeAyeCreative]

Thanks!

[@ducthong]

Cảm ơn anh rất nhiều

[@PeeAyeCreative]

You're welcome!

[@DocBuzzkill]

Is there a way to animate the toggle icon? I'd like to start with a plus (+) symbol that rotates when clicked and switches to a minus (-) symbol, and back to plus, once clicked and closed.

[@andreaspeters6702]

Cool Video. thx a lot!

[@davidrr62]

Hey love this and implemented it on my site, BUT... in mobile, made my text size smaller and can't seem to override in mobile font size. Can you help me with this?

[@aussietravelgal]

Can this also work on the accordion module. I followed your instructions but didn't work.

[@jessicabeckmann6834]

Thanks for your great video! Unfortunately, the gradient is displayed as a strange grey bar in the mobile view on the iPhone, although it should actually be transparent. Do you have any idea how I can fix this?

[@jessicabeckmann6834]

Problem solved :D: In mobile Safari you can't use the keyword "transparent", you have to use "rgba(255, 255, 255, 0)" instead. Now it works.

[@gurugugu1816]

Hi nelson, I was wondering how do you think this could be done with accordion modules... is that possible?

[@PeeAyeCreative]

I'm not quite sure what you mean, as an accordion is already collapsible. I don't think I would put this inside an accordion, as that doesn't seem like a good UX.

[@polyphemus1226]

hi, how do you add a bolder effect to your font in the css code ?

[@PeeAyeCreative]

You can change the font weight in CSS with font-weight: bold; or a number like font-weight: 600;

[@nobleloren]

It doesn't show up on moble. Do you know why?

[@sureshdighe8607]

I Want to add a close icon on the blurb ..please help in this case

[@Zarbitter]

Does anyone know what changes I have to make so this works for the Divi Next Blurb Module (from the Divi Next Essential range)? If I follow the tutorial, the Next Blurb Module stays expanded and the "read more/less" writing is below the blurb not inside of it. I love these tutorials, nobody else explains things in a way you actually learn.

[@PeeAyeCreative]

I don't have any experience with their plugin, maybe a developer could help.

[@ghithtabbaa]

Thanks a lot, so helpful.. but when I have a very long text, when I collapse the text the scroll goes to the bottom of the page.. can I make it back to the module ?

[@ghithtabbaa]

And one more thing, I have a sticky Header it starts transparent in the top of the page and when I scroll down it's become white.. so after I did what in the video The header become transparent when I click on the read more and when I scroll down return white again, it's like the beginning of the page become the module when I click on read more.. any ideas or fixes please ?

[@timdetmer]

but it would be nice to be able to do this for testimonial modules. Can it be done this way?

[@PeeAyeCreative]

This would work for any plugin that has a textarea, but will take modification accordingly for the module selectors.

[@powerseostrategy]

How can we do this with Woocommerce category text?

[@christrim320]

the only issue i have is when you collapse it back it automatically scrolls down to the footer. any suggestions as to fix said

[@Risheeraj]

can you help how to do this with divi supreme pro card carousel module ? tried the blurb one but doesn't work did few changes too but not working

[@PeeAyeCreative]

I don't have access to that and not familiar with it, but it would be the same concept as in the tutorial with different classes.

[@Risheeraj]

@@PeeAyeCreative yes i tried to change but i guess i am kot able to find the divi class proper css properly so its not working if u can check and help that will be great "Divi Supreme Plugin - Carousel Cars Module

[@purenorthcreative8798]

Love your tutorials, but this is not working for me in my blubs, the "expand to read more" is at the bottom of my long text and is doing nothing. I removed it all and started again but no go any ideas?

[@zedetach]

Is it possible to remove the 'read less button'?

[@yldrmhakansavc8971]

Subbed

[@gurushakti69]

Nelson you actually need to edit your code to make it work inside any module which has text in it. This will be even better. You think you can send me this code here?

[@Mortimare77]

I tried adapting the code to work in the testimonial module, unfortunately it would never expand and I'm unsure why. I replaced all of the "blurb" calls to "testimonial" but no luck. I also thought the standard slider text might need to have a read more section but that's way beyond me!

[@konniekeyworth8405]

It worked on mobile before like a month or two ago but now it doesn't show on mobile . Is there anything we can change to make it show up?

[@BenyDreamer]

Hi.. It work for "Post Content" module too?

[@PeeAyeCreative]

I'm not sure how that would work, worth a try I guess but might be tricky.

[@BenyDreamer]

@@PeeAyeCreative yes plz 👍👍

[@emmanuelcaballero6659]

how I can apply this only on mobile version

[@bencrompton1800]

Works amazingly on desktop but not on mobile and can't work out why?

[@MarketingMovies1337]

Good tutorial, but for some reason everything works, but it is showing all the text, so when I expand it doesnt do anything because its already there.

[@advanceddetail]

Would be helpful to see an completed example at the start of video

[@PeeAyeCreative]

There's no way to edit a video sorry, I do my tutorials from start to finish with you.

[@St.Hallow]

idk why it didnt work for me.. the expand button does nothing, anyone knows what should i do?

[@St.Hallow]

alright i finally got it to work, turns out i needed to add "pa-toggle-blurb" instead of "pa-toggle-text" in the blurb i wanted to (Expand And Collapse), thank you so much for the video mate!! you are a life saver!

[@mylyndab2530]

Sections? And rows i.e I have a row with 5 photos in a section

[@PeeAyeCreative]

Can you clarify if you are asking a question?

[@BeFoundOnTheWeb]

Why does Divi not want to save that jQuery? It just spins and spins.

[@PeeAyeCreative]

Sorry I'm not sure

[@CharlotteReneeLocs]

These videos are so blurry

[@PeeAyeCreative]

You're blurry.

[@jjoulton]

Thank you!

[@PeeAyeCreative]

You're welcome!

[@grady719]

Is there a way to do this in the person module?