How To Expand And Collapse Text In Divi (Like A Read More Toggle)
Вставка
- Опубліковано 26 лип 2024
- In this tutorial I will show you how to make text that can collapse and expand with a read more button in Divi.
Blog Post + Snippets: www.peeayecreative.com/how-to...
Become a member of our Divi Adventure Club!
www.peeayecreative.com/produc...
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecreative.com/
Thanks for watching!
You sir are a champion, just what i needed
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.
13.K is no subscribers? lol
very less@@theresasouthern8631
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.
You're welcome, this is definitely a fun one!
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!
Thanks for sharing!! I really appreciate your kind words and hope you continue to find our resources valuable! 🙂
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!👍
This was GREAT!! Hit the nail spot on - much appreciated.
Thank you for sharing your knowledge!!! Truly grateful !
You are welcome, my pleasure!
I can do very interesting things in webdesign because of this man! Thanks you so much!
This is exactly what I was after, thanks so much. You're a legend! Love your work.
You're welcome! Glad it helped!
Great tutorial, easy and customizable!
Hello Nelson.. This is superb.. Your tutorials has made my work easier.. Love your teachings. Thank you so much.
You are very welcome! I'm glad they help make your work easier!
It worked! The instructions were easy to follow. Thanks. Looks great without any code adjustment.
Awesome, so glad to hear!
This is exactly what I needed and it was so easy, thank you!
You make really great tutorial videos, that have helped me multiple times. And you have a great likable way of communicating THANKS 🙂
That's really nice to hear, thank you! 😊
Thank you Nelson! Another amazing tutorial! Thank you so much!
Your channel is OUTSTANDING... Thank you so much. This has been a lifesaver for some content I am creating. Thank you so much!!!!
You are so welcome! It's great to know my resources are helpful!
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.
Thank you so much for this excellent tutorial!
Perfect, this works like a dream and looks great, too.
Thank you for this tutorial! Need it on time!
Thank you. This was very helpful. Exactly what I needed. Much appreciated.
You're very welcome!
This was so very helpful! Thank you!
This worked like a gem! Excellent instructions!
Great, so glad to hear that!
Always helpful and reliable. Thanks man!
You're welcome!
Thanks so much I always find your tutorials excellent. Thanks
You're very welcome!
Nelson, you are so friggin awesome. I appreciate you!
Thank you 😊
Excellent, great job!!
Outstanding and well taught. Exactly what I needed.
I'm so glad to hear that!
Love this, thank you!
You're so welcome!
Teachers should be like you
You're welcome!
Nelson strikes again! Thank you, this helped a lot!
Thank you so much for another great video.
You're welcome!
Thank you Nelson - this was most helpful!
I'm glad you like it!
Awesome!! thank you!!!
You're welcome!
Works like a charm. 🙂 Thanx a lot.
You're welcome!
This helped a ton, thanks!
I'm glad to hear that!
Very very Helpfull your tutorial, Thank you Brother
You're welcome! I'm glad you like the tutorial.
Cool Video. thx a lot!
Thank you very much! :)
You're welcome!
Thank you !
You're welcome!
Yeaaaaah, It worked!
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!
I was able to easily adapt this to a Testimonial block as well!
Awesome, I had not tried that module but great to hear!
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.
@@Mortimare77 In the JS and CSS replace the blurb selector with ".et_pb_testimonial_description"
@@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)?
@@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 + "");
}
})
})
})
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!
Thank you
You're welcome!
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.
great tutorial. thank you so much. what code do i use if i want the color of the button black?
Cảm ơn anh rất nhiều
You're welcome!
thank you sir
You're welcome!
Thanks bro
You're welcome!
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?
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?
It's cool 🎉
Thanks!
How would I be able to use this in the "woo product description" in the divi builder?
Hi PA, great tutorial. I would like to know if it also could be adapted for basic Divi accordion. Thanks in advance
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.
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!
Great tutorial, Nelson! Could you add this to the Person module?
Probably!
Subbed
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.
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?
Great video! Thank you. Did anyone adapt this for Tabs? I'm getting errors.
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?
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.
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 !
Welcome aboard!
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!
I Want to add a close icon on the blurb ..please help in this case
Hi nelson, I was wondering how do you think this could be done with accordion modules... is that possible?
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.
the only issue i have is when you collapse it back it automatically scrolls down to the footer. any suggestions as to fix said
It doesn't show up on moble. Do you know why?
hi, how do you add a bolder effect to your font in the css code ?
You can change the font weight in CSS with font-weight: bold; or a number like font-weight: 600;
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?
thanks for the code nelson, how we can do the same with a row not just module?
I'll try to do a tutorial on that.
@@PeeAyeCreative thanks man, but keep the same format, read more gradient with half content waiting to be revealed.
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 ?
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 ?
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?
...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.
but it would be nice to be able to do this for testimonial modules. Can it be done this way?
This would work for any plugin that has a textarea, but will take modification accordingly for the module selectors.
but it would be nice to be able to do this for testimonial modules. Can it be done this way?
This would work for any plugin that has a textarea, but will take modification accordingly for the module selectors.
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.
I don't have any experience with their plugin, maybe a developer could help.
How can we do this with Woocommerce category text?
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?
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
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.
@@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
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?
Is it possible to remove the 'read less button'?
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.
Works amazingly on desktop but not on mobile and can't work out why?
how I can apply this only on mobile version
Hi.. It work for "Post Content" module too?
I'm not sure how that would work, worth a try I guess but might be tricky.
@@PeeAyeCreative yes plz 👍👍
Would be helpful to see an completed example at the start of video
There's no way to edit a video sorry, I do my tutorials from start to finish with you.
idk why it didnt work for me.. the expand button does nothing, anyone knows what should i do?
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!
Sections? And rows i.e I have a row with 5 photos in a section
Can you clarify if you are asking a question?
Why does Divi not want to save that jQuery? It just spins and spins.
Sorry I'm not sure
These videos are so blurry
You're blurry.
Thank you!
You're welcome!