Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
In this tutorial I will show you how to make text that can collapse and expand with a read more button in Divi.

▶️ Please watch the video above to get all the exciting details! 👆

Which Modules Will This Work On?

We are going to show you how to do this with two of the main modules that would normally need this, the Text module and the Blurb module. We have instructions and code for both of these, and it will be relatively easy to do.

I am going to focus on the Text module and then at the end show you the differences if you are using the Blurb module.

You could also do this to any module that has text, but it will be your responsibility to modify the code if you want to use another module. Off hand I couldn’t think of other modules that would be relevant, but if you have another user case then you will need to replace the CSS class selectors in our code to match those of the other module.

1. Add A Custom CSS Class To The Text Module

The first step is to add a custom CSS class to the specific Text module that you want to apply this effect. We use a custom class so that the snippet does not affect all the other Text modules on your site. Open the Divi Text module settings and go to the Advanced tab. Go to the CSS IDs & Classes toggle. Place the class “pa-toggle-text” in the CSS Class input field.

add custom CSS class to Divi text to expand and collapse

2. Add The jQuery Snippet To Your Site

We are going to use jQuery to create the main functionality of this expanding read more text toggle. This will be complemented with some CSS in the next step, but for now the task is to copy the jQuery snippet and add it to your website. I explain this snippet in the video, so it will be super helpful to watch along as you go through the steps here.

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

jQuery For Text Module

<script>
    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('<div class= "pa-text-expand-button"><span class= "pa-text-collapse-button">' + text_expand_text + ' <span class= "pa-text-toggle-icon">' + text_expand_icon + '</span></div>');
            jQuery(this).find(".pa-text-collapse-button").on("click", function() {
                jQuery(this).parent().siblings(".et_pb_text_inner").toggleClass("pa-text-toggle-expanded");
                if (jQuery(this).parent().siblings(".et_pb_text_inner").hasClass("pa-text-toggle-expanded")) {
                    jQuery(this).html(text_collapse_text + "<span class= 'pa-text-toggle-icon'>" + text_collapse_icon + "</span>");
                } else {
                    jQuery(this).html(text_expand_text + "<span class= 'pa-text-toggle-icon'>" + text_expand_icon + "</span>");
                }
            })
        })
    }) 
</script>

3. Understand The Code & Make Any Edits

Variables

The first part of this snippet is a list of four variables. These all start with the “var” and are easy to fine. These are used to make it easier for you to find and customize the code. Do not change anything else in the text, we are using this method so that it is easier for you and does not require any edits to the actual code.

Changing The Text

The only part that you should edit in the code is in the variables. If you want to change the text or the icon, you can see that in the first part of the code. Just look for the text “Expand To Read More” or “Collapse To Read Less” and feel free to change that text to whatever you want!

Changing The Icons

If you want to use a different icon, you are welcome to do that. You can choose from any of the built-in ETModules font family icons. You can change the code in the variables.

4. Add The CSS Snippet To Your Site

The last step is to add the CSS to adjust the styling and add some of the functionality. You can copy the entire snippet below and paste it into your site. Each item in the snippet has a helpful comment, and I will also explain what each item does in the video, so be sure to watch that as well. 

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*collpse and set the height of the toggle text*/

.pa-toggle-text .et_pb_text_inner {
	max-height: 200px;
	transition: max-height 0.3s ease-out;
	overflow: hidden;
}


/*add gradient to the collapsed text*/

.pa-toggle-text .et_pb_text_inner:after {
	content: "";
	display: inline-block;
	position: absolute;
	pointer-events: none;
	height: 100px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(0deg, #fff 10%, transparent);
}


/*style the expand text link*/

.pa-toggle-text .pa-text-expand-button {
	padding: 0.5em;
	text-align: center;
	color: #00d263!important;
}


/*change the curor to a pointed when hovering over the expand text link*/

.pa-toggle-text .pa-text-expand-button span {
	cursor: pointer;
}


/*define the font family for the toggle icon*/

.pa-toggle-text .pa-text-expand-button .pa-text-toggle-icon {
	font-family: ETMODULES, "sans-serif";
}


/*set the max height and transition of the expanded toggle*/

.pa-toggle-text .pa-text-toggle-expanded {
	max-height: 2000px;
	transition: max-height 0.3s ease-in;
}


/*hide the gradient when the toggle is expanded*/

.pa-toggle-text .pa-text-toggle-expanded.et_pb_text_inner:after {
	background: none;
}

Using The Blurb Module Instead

I decided not to repeat every step for the Blurb module here in the writtne post, but you can watch the video if you need any help. The process is exactly the same! It just uses slightly different code, and a difference custom class of “pa-toggle-blurb” instead. So go ahead and try it! Add your Blurb module, add the jQuery, add the CSS, and let me know if you have fun!

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

jQuery For The Blurb Module

<script>
    jQuery(document).ready(function() {
        var blurb_expand_text = "Expand To Read More";
        var blurb_collapse_text = "Collapse To Read Less";
        var blurb_expand_icon = "3";
        var blurb_collapse_icon = "2";

        jQuery(".pa-toggle-blurb").each(function() {
            jQuery(this).append('<div class= "pa-blurb-expand-button"><span class= "pa-blurb-collapse-button">' + blurb_expand_text + ' <span class= "pa-blurb-toggle-icon">' + blurb_expand_icon + '</span></div>');
            jQuery(this).find(".pa-blurb-collapse-button").on("click", function() {
                jQuery(this).parent().siblings(".et_pb_blurb_content").find(".et_pb_blurb_description").toggleClass("pa-blurb-toggle-expanded");
                if (jQuery(this).parent().siblings(".et_pb_blurb_content").find(".et_pb_blurb_description").hasClass("pa-blurb-toggle-expanded")) {
                    jQuery(this).html(blurb_collapse_text + "<span class= 'pa-blurb-toggle-icon'>" + blurb_collapse_icon + "</span>");
                } else {
                    jQuery(this).html(blurb_expand_text + "<span class= 'pa-blurb-toggle-icon'>" + blurb_expand_icon + "</span>");
                }
            })
        })
    }) 
</script>

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

CSS For The Blurb Module

/*collpse and set the height of the toggle text*/

.pa-toggle-blurb .et_pb_blurb_description {
	max-height: 200px;
	transition: max-height 0.3s ease-out;
	overflow: hidden;
}


/*add gradient to the collapsed text*/

.pa-toggle-blurb .et_pb_blurb_description:after {
	content: "";
	display: inline-block;
	position: absolute;
	pointer-events: none;
	height: 100px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(0deg, #fff 10%, transparent);
}


/*style the expand text link*/

.pa-toggle-blurb .pa-blurb-expand-button {
	padding: 0.5em;
	text-align: center;
	color: #00d263!important;
	font-weight: bold;
}


/*change the curor to a pointed when hovering over the expand text link*/

.pa-toggle-blurb .pa-blurb-expand-button span {
	cursor: pointer;
}


/*define the font family for the toggle icon*/

.pa-toggle-blurb .pa-blurb-expand-button .pa-blurb-toggle-icon {
	font-family: ETMODULES, "sans-serif";
}


/*set the max height and transition of the expanded toggle*/

.pa-toggle-blurb .pa-blurb-toggle-expanded {
	max-height: 2000px;
	transition: max-height 0.3s ease-in;
}


/*hide the gradient when the toggle is expanded*/

.pa-toggle-blurb .pa-blurb-toggle-expanded.et_pb_blurb_description:after {
	background: none;
}
Categories: Divi CSS Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

166 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. Reed <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    Is there a way to have a read more toggle open the expanded contents downward rather than from the center?

    For instance, if I have a row with three columns and a text module of varying length in each column (all with the toggle CSS class applied), when I open each toggle currently, they expand from the vertical center of the module upward and downward as necessary. This then throws off the top alignment of the text modules if they’re all open as the text in each is a different length (height).

    Ideally, I’d l like to be able to have the hidden contents expand downward only to somewhat preserve the look and feel of a table when I have stacked text modules in multiple columns.

    Thanks for all that you do!

    Reply
    • Hemant Gaba

      Hi Reed!

      The requirement you have shared is outside scope of this guide. However, we will consider it and possibly create a new guide with it.

      Reply
      • Hemant Gaba

        Hi Reed!

        I’m glad the it worked for you. Thank you for sharing the solution. To make the customization work on specific screen size, add the above CSS code in the media query.

        @media all and (min-width: 981px){
        //code
        }

        Let me know how it goes!

      • Reed <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

        For us, it turned out that all we needed to do was to disable the “equalize column widths” setting and that populated everything downward rather than from the center.

        Follow-up question: is it possible to limit this to select devices? For instance, if I wanted to have the toggle “Read More” text only apply to anything over 981px?

  2. Michal <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    Hi Nelson,
    Thanks for this tutorial! I have a question about multi language. I have a website with 3 different language and how i can make it to work with this script?
    Thank you for your advise.
    Michal

    Reply

Comments By Others

  1. Ton van Uden

    Hello,
    Thanks for the code!
    I am using your code and it works almost perfect.
    The problem is that i get twice the toggle button. On top and on the bottom of the text.
    I want it only on the bottom.

    Thanks Ton

    Reply
  2. Ach

    Excellent! can we do this also for a row with different modules in it?

    Reply
  3. Marianne

    Thank you, this tutorial was so great and easy to follow for a beginner like me. I’ve used it to add more info to text boxes on a website that someone built before, and it turns out that the beautiful border/frame with elaborate corners on the box was an overlaid image that now stretches and looks quite ugly when the box is expanded. Do you have any idea for a fix, or will I just have to remove the pretty frame? Perhaps it’s possible to expand just the middle section of the box, leaving the corners as they are?

    Reply
    • Hemant Gaba

      Hi Marianne!

      I need to look at the design to provide a custom solution. Can you share the URL of the page to check further?

      Reply
  4. Chelsie

    Hey Nelson, I really appreciate this source code! It looks great. I only have one question….when the read more or read less button is hit, it appropriately opens the text but it also scrolls to the top of the page. Any advice to change that.

    Reply
    • Hemant Gaba

      Hi Chelsie!

      Please make sure to add “#” in the button link.

      Reply
  5. Chelsie

    Hey I was hoping for some help. I love this code and everything works great but when you click the read more or read less button it opens the toggle but also it directs you back to the top of the page. Any advice for me? I’ve also noticed that once the read more or read less button is hit it adds a # to the end of my url…..

    Thanks! Chelsie

    Reply
  6. Klaus

    Hello Nelson,

    thanks for the code “how-to-expand-and-collapse-text-in-divi” I have used it on a client’s site. Now the texts that are shortened have different backgrounds. The color gradient does not look good at the end. Is there a possibility that the gradient automatically adjusts to the respective background? I have switched off “background-image: linear-gradient(0deg, #fff 10%, transparent);” on the page.
    I look forward to your answer.
    Greetings from Germany
    Klaus

    Reply
    • Hemant Gaba

      Hi Klaus!

      Can you share the URL of the page to check further?

      Reply
  7. Clinton

    Hi Nelson,

    Great code, thank you for sharing. I noticed a small omission in the jQuery code where a second closing span at the end of line 8 is missing (just before the closing div tag). This is a small omission and the code operates without the fix, but to ensure that all tags are matched in the DOM, this tag should be included.

    jQuery(this).append(” + text_expand_text + ‘ ‘ + text_expand_icon + ”);

    … the form submission stripped all tags which changed my submission. So here it is again. The 8th line is missing a second closing span at the end of the closing div.

    Please let me know if I am missing something in understanding the code.

    Reply
    • Hemant Gaba

      Thanks for sharing the code. We’ll test it and update the guide.

      Reply
  8. Caleb Byers

    Is there a way to add a read more toggle like this to the text in the divi “person” module? Thanks

    Reply
    • Hemant Gaba

      Hi Caleb!

      I’m afraid the code won’t work for the Person module. However, we’ll provide more solutions soon for other modules.

      Reply
  9. Francesco Dongo

    Hi! thanks a lot for your tutorials and plugins!
    I bought and discovered a lot of things on your great website! 🙂

    Regarding this code, is possible to have a clickable text area that expand and collapse itself on click? without the .pa-text-collapse-button area I mean
    Obviously the pa-toggle-text area cursor must be set to pointer I know that, but I’m not familiar with js changes.

    The onclick function must be set on pa-toggle-text and not to pa-text-collapse-button but I don’t know how to do that in the js code integration.

    Thank you!

    Reply
    • Hemant Gaba

      Hi Francesco!

      We will add the feature in our feature request list and will provide a solution soon.

      Reply
  10. Alyssa

    Finally found a solution thank you for sharing

    Reply
  11. Zak DeHondt

    Hi. Love your content. Purchased your tab maker plugin and its great.

    I’m using this to target a piece of content from divi machine. I’ve got it working in my video gallery, but when I click load more to add more videos to the results, the additional results do not have the read more toggle. Any ideas on how to resolve this?

    Link to page:
    https://sachseconstruc.wpenginepowered.com/about-us/videos/

    USER: demo
    PASS: sachse123

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Zak,
      I am confused what you mean here. This tutorial is not like a pagination read more, but more like an accordion. I would assume their plugin has a load more pagination feature built-in to their loop.

      Reply
  12. Peter

    I’m trying to follow this but for making an exapandable accordion, however, I can’t get it to work. I would appreciate some help. For context I have a 200+ item accordion but I’d only like say 10 of the first elements visible.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Peter,
      I don’t understand what you mean about 200+ or 10 item accordion. This tutorial is not related to accordions. Please clarify and share a link and describe what you mean is not working.

      Reply
  13. The Multimusicman

    Thank you for this detailed instructions! Just implemented.

    Reply
  14. Alani Keiser

    WOW! After 2 days of struggling with this with the Divi guys and their own code etc… you have finally given me an amazing solution that worked right away.
    Thank you so much!!
    Is there a way to change the color of the read more text?

    Reply
    • Hemant Gaba

      Hi Alani!

      You’re very welcome! To change the the color of the read more text, find the following piece of code in the above CSS and change the color in it.

      .pa-toggle-text .pa-text-expand-button {
      padding: 0.5em;
      text-align: center;
      color: #00d263!important;
      }

      Hope it helps!

      Reply
  15. Eric

    any tips or code mods you can help make this module keyboard accessible?

    Reply
    • Hemant Gaba

      Hi Eric!

      The customization is not keyboard accessible. We will look into it further. You can try basic keyboard shortcuts for now.

      Reply
  16. Laura Vinson

    Hi Nelson! This was very helpful and easy to use and has much better functionality than my old workaround of adding more text when hovering.

    My only issue – If I expand the text and go to collapse it again, the newly collapsed link still says “show less” instead of going back to “read more”. Does that make sense? I’m not sure if I need to add more code so that when I click it a second time it goes back to displaying as “read more”.

    Reply
    • Hemant Gaba

      Hi Laura!

      There is no additional code required for it. There must be a conflict with the jQuery on your end. Try disabling the cache plugin and Defer jQuery And jQuery Migrate option in the Performace tab and see if it helps.

      If the issue persists, share the page URL with me to investigate further.

      Reply
    • Hemant Gaba

      Hi Asif!

      We’re aware of the issue. A fix will be provided soon.

      Reply
  17. shahzaib

    what about conatct form?

    Reply
    • Hemant Gaba

      Hi Shahzaib!

      Could you please share some more details of the feature you’re looking for?

      Reply
  18. Margriet

    Hi,

    Many thanks for this – works briljantly on desktop, however on mobile the whole text is showing. Any thoughts on how to resolve this? Filled out the url below.

    Reply
    • Hemant Gaba

      Margriet!

      Could you please share the URL of the page where you are applying the code to check the issue further?

      Reply
  19. Elizah Hamokole

    Hi, thanks for the tutorials on expending and collapsing text area, its really helping, in addition how can I instead of clicking the collapse button, click other info….or pics… and causing the expended one to collapse?

    Reply
  20. Randy Hunt

    Hi Nelson, thanks so much for sharing your knowledge. This works great! Is there a way to have it only show on mobile devices?

    The dev site is: https://amf.wprandy.com/anniversary-flowers/

    Thank you again!!
    Randy

    Reply
  21. Wolter

    Hi,
    I love this snippet, it works really well for my website. Is there any way to make this work in different languages using Polylang? I tried setting a different snippet for each language but can;t get it to work. Any ideas how to do that?

    Reply
    • Hemant Gaba

      Hi Wolter!

      The same code should work for all languages. Why are you trying to add a different snippet for other language pages?

      Reply
  22. Philip

    Hi! Awesome tutorial it helped a lot! I’m wondering how to force the expanded text module to collapse when a new expands?

    Reply
    • Hemant Gaba

      Hi Philip!

      It is not possible right now. We will look into it and come up with a solution soon. Thanks for letting us know.

      Reply
  23. Shannon

    Hi! Thanks for this. I would love to see a version of the code for the person module if you have it (for when someone has a long bio and to make them all equal heights.)

    Reply
    • Shannon

      Never mind, solved it 🙂 Anywhere in the jquery or css that it said .et_pb_text_inner, I switched it with .et_pb_team_member_description.

      Reply
  24. Federico

    Hello, how can we do the same but with the text of the testimonials module? thanks a lot for another great tutorial!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      I’m not sure what you mean. The Divi Responsive Helper does have a collapse feature for the menu submenus, but is not related to accordions in any way, and this tutorial would be used instead of an accordion, otherwise just use an accordion.

      Reply
  25. Anni

    I have followed all the instructions and it didn’t work for me at all. Nothing happened to the text.

    Reply
  26. Jane S

    Thanks for this great tutorial! We implemented it on our client’s site and it’s working perfectly. I was wondering about if you might suggest some additional CSS to implement a hover-over color for the “Read More” / “Read Less” text link. And also possibly to update the “background” color on hover-over (Our client wanted the look of a button vs. just a link so we added “background” to the CSS for: .pa-toggle-text .pa-text-expand-button )

    Reply
    • Hemant Gaba

      Hi Jane!

      Please add the following code to make the link work as button on hover with different color and background:

      .pa-toggle-text span.pa-text-collapse-button:hover {
      color: red;
      background: #000;
      padding: 20px;
      transition: all 0.5s ease-in-out;
      }

      Let me know how it goes!

      Reply
    • Hemant Gaba

      Hi Flo!

      I have checked and the text is collapsing and expanding without any issue on the page you have shared above. Is the issue resolved?

      Reply
  27. Kent Gade Olesen

    Hi – a very great tutorial, just implementet it on the below site. but when I click on the “read more” , does it take me to the top of the page? What have I done wrong. I hope that I could remain at the spot where I clicked.

    Reply
  28. paul

    Hallo Nelson,
    Really happy with your free code, verry helpful.
    Question, how do I make it work for 2 text collapses with different heights on 1 page. Text 1 has a height of 300px en text 2 I want a height for 150px. Do I have to copy all the codes and rename and if so how do I do this.
    Thank you in advance
    Paul (Netherlands)

    Reply
    • Hemant Gaba

      Hi Paul!

      Please another class in the second text module, lets it be second-module. Then add the following code in Theme options:

      .second-module.pa-toggle-text .et_pb_text_inner {
      max-height: 150px;

      }

      .second-module.pa-toggle-text .pa-text-toggle-expanded{
      max-height: 2000px;
      }

      Let me know how it goes!

      Reply
      • Paul Foole

        Hi Hemant, thank you for the reply.

        After adding the class second-module and the code in theme options there was no result at all
        The url is placed in the form. On this page see
        under section RECENTCIES the first 2 columns. The first column has the new class en the second one the original.

        If you would be so kind to take a look.

        Thanks

  29. Arnold

    Hi Nelson, great work, thx a lot.
    I have a problem with the expand/collapse button. When expanding the text it works fine but when you hit the collapse button the text collapses but the site don´t go back to the viewpoint of the expand button. I didn´t change much, just the color and alignment of the buttons and the maximum height of the expanded text.
    Would be great if you can help.

    Reply
    • Hemant Gaba

      Hi Arnold!

      Everything works fine at our end. Could you please share the URL of the page where you are applying the code to check the issue further?

      Reply
      • Hemant Gaba

        Thank you for sharing the website. I’m able to replicate the issue. We will update the guide soon. Stay tuned!

      • Arnold

        Hi, thank´s for the quick response.
        Here is the URL:
        https://www.petragell.com/text/
        If you click on “mehr…” it expands and if you click on “weniger” at the end of the text it callapses but it don´t go back to the beginning of the text.
        I use the code in a childtheme. Would be great if you have any idea what the problem could be.
        Thx in advance.

  30. VJ

    Hello, fisrt of all, thank you so much for code. I would like to ask you if is there any possibility, how to add scroll back effect to top of collapsed text after click on “Collapse To Read Less”? Now when you click on “Collapse To Read Less” it leaves you wherever expanded text end. Its a little bit frustrating, especially on mobile phone, where you can miss whole page content, because it leaves you at very bottom of page for instance, and you have to manually scroll back… 🙁
    Thank you for your reply

    Reply
    • Hemant Gaba

      Hi there!

      Sorry, I did not understand the required feature properly. Currently, the “Collapse To Read Less” scrolls back to the point where the expansion started. Do you need to change the scroll back limit manually to a certain point?

      Reply
  31. Louis Bernard

    Hi there,

    On acadianacareer.com/career-counseling I can not seem to get my toggle to work again. The font is not showing up. The gradient that hides the text still works. But the text that functions as a button is no longer showing up.

    Do you guys know what I may be able to do to fix this?

    Reply
    • Hemant Gaba

      Hi Louis!

      It seems you have removed the module now. Can you please add it again so that I can check further?

      Reply
  32. Louie

    Hi Nelson,

    Unfortunately, it seems the code for the blurb just stopped working. I am not too sure what is going on.

    For awhile, everything was working fine on acadianacareer.com/career-counseling. Now all of a sudden, the text to expand just doesn’t show up. It cuts my information down just fine, but the words that act as the button no longer appear. I was wondering if you have any suggestions for fixing this?

    Reply
    • Hemant Gaba

      Hi Louie!

      It seems you have removed the module. Can you please add it again so that I can check further?

      Reply
  33. Solveig

    Thank you so much! I am a total beginner and was so proud to be able to include a read-more-button into my homepage with your help.
    Just wanted to say thank you 🙂

    Reply
    • Hemant Gaba

      You are most welcome Solveig!

      We are glad to know that our guide helped you in some way. Stay tuned for more such guides.

      Reply
  34. Dawn Smith

    Beautiful!! When I open the text, it expands and I scroll down the page. When I close the text, though, it appears to collapse where the bottom of the website lifts to the top. The result is that I have read the first section of collapsible text, but when I collapse it, I’m now so far down the page that I’ve missed several sections. Is there a way that when I collapse the text, the page “lands” back at the top of that particular collapsible section?

    Here’s the page I’m working on. See the first section “Aircraft Registration”. When I open it, read it, then collapse it, I’m all the way down at the bottom of the page in the Drones section. I would like it to land back at the Aircraft Registration section.

    https://env.e96.myftpupload.com/practice-areas/faa-matters/

    Reply
    • Hemant Gaba

      Hi Dawn!

      I have checked the page and it seems you have removed the collapse button and feature from the script. Can you please add the whole script again so that I can check again?

      Reply
      • Hemant Gaba

        Hi Bhushan!

        I can see the script and the styles are added for the customization, but the class is not applied in any element of the page. Can you please follow the full guide again and let me know if it works?

      • Bhushan

        Hi Hemant,

        Firstly, let me thank to Neelson for this tutorial.
        I am at the same situation with the exact problem that Dawn has mention.

        If you can see this link where I have been using this code:
        https://tractordost.com/brand/johndeere/

        After collapsing back the text, it should scroll back to where the “Read more” button is.

        Thanks.

  35. Danielle

    Thanks for sharing. I tried exactly as you said and unfortunately it doesn’t work.. just has the “read more” read less” text underneath but doesn’t create the function.

    Reply
    • Hemant Gaba

      Hi Danielle!

      Everything works fine at our end. Could you please share the URL of the page where you are applying the code to check the issue further?

      Reply
  36. Simone

    Hi Nelson, thanks so much for this great solution!

    In my case everything works fine in Chrome and Safari but in Firefox the text modules are expanded by default and at the bottom appears: “Read more3” (‘Leggi tutto3’, in Italian). Could you help me, please?

    Thanks so much and kind regards!

    Reply
    • Hemant Gaba

      Hi Simone!

      Everything works fine at our end. Could you please share the URL of the page where you are applying the code to check the issue further?

      Reply
  37. Alex

    Hey there! Thanks for this very helpful tutorial – the code works great on almost every single page of the site I’m building now, except for one.

    The “Expand to read more” and “Collapse to read more” functions appear, but when you click to expand, the text does not expand, though the command changes to “collapse.”

    Here’s the page I’m struggling with: https://alisonteal.net/events/

    And the issue is happening under the class entitled “King, Queen, Warrior, Magician, Lover.”

    As you’ll see, the collapsibles work on every other description on that page and on every other page on which I use them on this site – just this one doesn’t seem to want to work.

    Thanks in advance for your time and support!

    Reply
    • Alex

      Nevermind – there was a problem with the HTML. Managed to fix it by looking in the “Text” section of the editor (instead of the “Visual” editor). Wanted to make sure I replied to my own thread in the event that someone else is struggling with this and needs to find a solution.

      Reply
  38. Yra Megan

    Hey there! How do we customize the code so we can have custom expandable text settings on different pages?

    Say on the home page you want to show 3 lines of text with white gradient, one the blog page you want to show 1 line of text with a white gradient. Hoping you can help me out!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      You can copy the code, change the custom class, modify any values and properties in the code. That’s all up to you, and if you need help with things like that you would need to hire a developer.

      Reply
  39. Raffi Mardirossian

    Hi Nelson,
    Thanks for this tuto ! Loved it and works like a charm !
    What would be the additional CSS to hide the “read more” button on desktop please ?

    I actually have the following :

    @media only screen and (max-width: 767px) {
    .pa-toggle-text-white .et_pb_text_inner {
    max-height: 375px;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
    background: #ffffff;
    }

    Reply
    • Raffi Mardirossian

      In my personal case, on desktop I just get “READ MORE 3” (I don’t need the function on desktop).
      It’s written in black, if hiding is not possible, setting text in white will be acceptable.

      Reply
  40. Eric

    Hi there,

    Very helpful tutorial. Is there a way to have the expand option only show on tablet and mobile versions?

    Reply
  41. Darko aka Zadarko

    Hi,

    I would like to thank you for your you help. Thank you! I like your blog, i`m sending some good respects from Croatia – Zadar! 🙂

    Kind regards,
    Darko

    Reply
  42. PodBW

    Hi All,

    Question.

    What we want to do with this expand and collapse text is have just one section on our website where the “Read More” button is aligned to the right. Do we have to create a new CSS class and add it to the jQuery or is there a simpler way where we don’t repeat ourselves and add excess code?

    Reply
    • Hemant Gaba

      Hey there,

      You need to follow the instructions given in the guide to achieve the desired results.

      Reply
  43. Luis

    Thank you very much for this article.

    There’s a missing in the following JS line:

    jQuery(this).append(” + text_expand_text + ‘ ‘ + text_expand_icon + ”);

    It should be:

    jQuery(this).append(” + text_expand_text + ‘ ‘ + text_expand_icon + ”);

    Reply
  44. Michelle

    Hi Nelson,
    Thanks for this tutorial! I do have a different module this would be great to apply to.
    I’m using the ‘Slider’ module for my testimonials section. It’s just text based, but some client testimonials are significantly longer than others.
    I’d love to apply the ‘read more’ option so I don’t have huge gaps above and below shorter testimonials, particularly on mobile view.
    I tried to change the Class CSS Selectors for the slide, but there wasn’t that option, only to edit custom CSS in the advanced tab.
    Is there a way for this to work inside the Slider module?
    Thanks so much for your time (and fantastic Divi tutorials!)
    Michelle

    Reply
  45. Alif

    Hi, I have a two text module in a a row, I want to expand right and left module text at once by clicking the read more button which I have placed on the left text module. How can i expand two text module by clicking left text module Read more button? If I add the css class for the right text module, it also shwoed read more button. I just want to make a one read more button for the left text module, and when you will click on , the left and right text module will be expand. Is it possible? Please let me know. Thank you.

    Reply
  46. Sam

    Perfect, thanks for this exactly what I was looking for. Great tutorial aswell. Thank you!

    Reply
  47. diaz

    Hello there,
    thanks for the sharing. I have a problem with this tutorial. everything works fine until I click on the “read more”. The text expands but then it goes to an another page on my website, and it goes everytime, on every module i make.

    how can I solve this? thanks for the answer and sorry for my english.

    Reply
    • Hemant Gaba

      Hey Diaz,

      Could you please share the URL of the page where you are applying the code in order for me to check the issue on my end?

      Reply
  48. JB

    This is a thing of beauty. This was exactly what I was looking for. Thanks so much for a great tutorial.

    Reply
  49. Demitris Maddox

    How can I have three different collapse heights? One height for mobile, one height for desktop and one height for tablets?

    Reply
    • Hemant Gaba

      Hey Demitris,

      You can use height instead of max-height in the CSS Snippet and that will work for the desktop.

      For Tablets copy the code, place it between these curly brackets, and change the height value:
      @media all and (min-width: 768px) and (max-width: 980px){
      //place code here
      }
      For mobiles copy the code, place it between these curly brackets, and change the height value:
      @media all and (max-width: 768px){
      //Place code here
      }

      Let me know how it goes.

      Reply
  50. Kristen

    Hi! Trying to increase the size of the icon. I removed the text and am using L and K to expand and collapse but it’s miniscule. Ideas? Many, many thanks!

    Reply
  51. William

    Thank you so much for this tutorial! I have implemented this on a new client site and it looks great.

    I am trying to change the icons to a plus and a minus but I cannot figure out how to do it.

    From what I understand of the code, the expand and collapse icons seem to be set to “3” and “2” respectively. I presume these correspond to the up and down carrots but I cannot find any correspondence between those symbols and those numbers.

    Am I missing something about how those values are used? How do I find the equivalent values for the plus and minus icons in circles?

    Thanks so much!

    William

    Reply
    • Hemant Gaba

      Hey William,

      Code for plus: L
      Code for minus: K

      Please use these codes instead of 3 and 2 to achieve the results. 3 and 2 are the number that gets changed to the arrow icons because these numbers are registered in Divi Dynamic icons.

      Reply
      • William Munroe

        Ah, so the character L becomes a + in that font? Is there a table of the correspondence somewhere for future reference?

        Thanks so much!

      • Hemant Gaba

        Hey William,

        You can search for the Divi codes online and you will see all the codes that you can use.

  52. Kurt M

    Is it possible to do the same with a Woo Product Description module?

    Reply
    • Hemant Gaba

      Hey Kurt,

      We haven’t tried it yet but we will definitely try this.

      Reply
      • Hemant Gaba

        Hi Amber!

        The Woo Woo Product Description module is currently in our upcoming features. I’m afraid we can’t provide you with an ETA right now. Stay tuned!

      • Amber

        Did you ever figure out how to modify the code to use on a woo product description? This is what I need to do.

      • Kurt M

        I’m working on a replacement website for a non-profit and using the Woo database for the communities that they serve. When a local community coordinator has a particularly long biography, I’d like to collapse it. I could go to a text field but there are over 200 community coordinators and I would prefer to keep it in the database. Here is an example of a long bio by Primitiva Roca in the hibiscus block:
        https://bcfdev.org/product/oruro/
        Do you have any suggestions?

      • Hemant Gaba

        Hey Kurt,

        I have checked the URL provided and the code is working fine on this page. Just to confirm, as you mentioned that you have a lot of pages so do you want to implement this functionality on all the pages at once without going to each module?

  53. Konnie

    Hi Nelson I’ve used this code before and it worked fine both on the desktop and the mobile . Divi recently did an update to the theme and now it wont work on mobile only on desk top .. Is there any way to fix this . also thanks for a great toggle option.

    Reply
    • Hemant Gaba

      Hey Konnie,

      Could you please share the URL of the website for me to investigate further?

      Reply
  54. Krista

    Hi Nelson and all, just wanted to share a possible solution to what some of you are experiencing with the dark/black gradient. I think this is likely happening for those of you using Safari (including iPhones). This is because Safari apparently has issues interpolating “transparent”, so in the CSS instead of typing “transparent” use the rgba value for white (or whatever colour you are using for your gradient) – for white this is rgba(255,255,255,0). Hope this helps some of you! 🙂

    Reply
    • Anna

      Thank you Krista this helped me so much!!! I was driving crazy not finding the error for iPhone & Safari! 😀

      Reply
  55. Bill Cole

    Hi Nelson, so this is super helpful and saved me a whole bunch of time so thank you! I used the blurb version and it works great but I was expecting to have all of the blurb text be cut off at the same height and instead they are all still different heights which in my case kind of defeats the purpose…

    How do I make it so all of the blurbs are cut off at the same height or the same amount of text? I want all of the blurbs to be the same hieght.

    Reply
  56. Daniel O

    Hi Nelson,

    I have the same issue as one on the previous posts, All works fine except for mobile where the gradient is a darker colour. Did you manage to find what issue this was and how to fix it?

    Reply
    • Hemant Gaba

      Hey Daniel,

      I have checked the URL and I cannot spot any issue in the toggle. Could you please direct me to the issue so that I can investigate and provide you with an accurate answer?

      Reply
  57. Ken Levandoski

    I have the Code implemented in a new version of a website I am building and Thank you! I was wondering if I could define the Minimum size of the Text Box By line count or First Paragraph only? I just want the first overview paragraph and then the Detailed part of the story. https://www.psilo.game/homev2

    Reply
    • Hemant Gaba

      Hey Ken,

      You can manipulate the max-height property to show or limit the content.

      Reply
  58. Art Derfall

    On mobile, all the text, including the H3 headings, are smaller than the text in other text modules on the page. It’s fine on my laptop. On my iPad Air2 the fade shows as a gray gradient.

    Reply
    • Hemant Gaba

      Hey Derfall,

      I have checked the code on my end and I am not able to replicate the issue. Could you please try using incognito mode or a different browser and see if that helps?

      Let me know how it goes.

      Reply
  59. Kontra Joe

    Hi Nelson,

    I did what you wrote in the tutorial. Unfortunately, the opening link is 2x on the page. Can you help me where I messed up?

    Thanks,
    Joe

    Reply
    • Hemant Gaba

      Hey Kontra,

      I am afraid that I totally understood what the issue is as everything works fine on the URL that you provided. Are you trying to slow down the speed of the toggle?

      Reply
  60. Konstantinos Skepasianos

    Hello. I am using this and also using magic mouse js on my website. To apply The hover effect by magic mouse js i need to add

    “magic-hover magic-hover__square”

    as a class. I tried to add it in the js code you provided next to each class like

    ” jQuery(this).append(‘

    but it doesnt work. any help? I am a js beginner

    Reply
    • Hemant Gaba

      Hey there,

      Could you please share the code that you are using and also elaborate on where exactly you want to add this class so that I can help you out with this?

      Reply
    • southupp

      I had this issue only when viewing on Safari.. which apparently has a bug with gradient css. Found the answer!! never use “transparent” in css…

      “The problem is: –tw-gradient-from: transparent;
      Safari renders transparent as rgba(0,0,0,0) (maybe a safari bug?)

      If I change transparent to rgba(255,255,255,0) it looks good and as intended.”

      Here is link to thread where i found it.
      https://github.com/tailwindlabs/tailwindcss/issues/2985

      Reply
  61. Victor Deca

    Hi Nelson,

    Thanks for the solution. Interesting that this is a standard solution in Joomla.

    I am trying to add it to a text in a post and although it shows the functionality in the post itself, but the button READ MORE doesn’t show on the Divi Blog Module when it is set to show all the blog content. Maybe it’s a jQuery conflict?

    Again thanks for your great help for the Divi Community.

    Reply
    • Hemant Gaba

      Hi Victor,

      I am afraid that I am not able to completely understand the issue here. Could you please elaborate “although it shows the functionality in the post itself” part for me?

      Reply
  62. david.papenfus

    Hi Nelson

    Thanks once again for another informative tutorial.

    I’ve tried to do this with the person module, but it’s not expanding. Can you please see where I might’ve gone wrong.

    I’m targeting: et_pb_team_member and et_pb_team_member_description

    jQuery(document).ready(function() {
    var person_expand_text = “Expand To Read More”;
    var person_collapse_text = “Collapse To Read Less”;
    var person_expand_icon = “3”;
    var person_collapse_icon = “2”;

    jQuery(“.pa-toggle-person”).each(function() {
    jQuery(this).append(” + person_expand_text + ‘ ‘ + person_expand_icon + ”);
    jQuery(this).find(“.pa-person-collapse-button”).on(“click”, function() {
    jQuery(this).parent().siblings(“.et_pb_team_member”).find(“.et_pb_team_member_description”).toggleClass(“pa-person-toggle-expanded”);
    if (jQuery(this).parent().siblings(“.et_pb_team_member”).find(“.et_pb_team_member_description”).hasClass(“pa-person-toggle-expanded”)) {
    jQuery(this).html(person_collapse_text + “” + person_collapse_icon + “”);
    } else {
    jQuery(this).html(person_expand_text + “” + person_expand_icon + “”);
    }
    })
    })
    })

    /*collpse and set the height of the toggle text*/

    .pa-toggle-person .et_pb_team_member_description {
    max-height: 200px;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
    }

    /*add gradient to the collapsed text*/

    .pa-toggle-person .et_pb_team_member_description:after {
    content: “”;
    display: inline-block;
    position: absolute;
    pointer-events: none;
    height: 100px;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(0deg, #fff 10%, transparent);
    }

    /*style the expand text link*/

    .pa-toggle-person .pa-person-expand-button {
    padding: 0.5em;
    text-align: center;
    color: #00d263!important;
    font-weight: bold;
    }

    /*change the curor to a pointed when hovering over the expand text link*/

    .pa-toggle-person .pa-person-expand-button span {
    cursor: pointer;
    }

    /*define the font family for the toggle icon*/

    .pa-toggle-person .pa-person-expand-button .pa-person-toggle-icon {
    font-family: ETMODULES, “sans-serif”;
    }

    /*set the max height and transition of the expanded toggle*/

    .pa-toggle-person .pa-person-toggle-expanded {
    max-height: 2000px;
    transition: max-height 0.3s ease-in;
    }

    /*hide the gradient when the toggle is expanded*/

    .pa-toggle-person .pa-person-toggle-expanded.et_pb_team_member_description:after {
    background: none;
    }

    Reply
    • Shannon

      I was able to use his original code for the person module. Anywhere in the jquery or css that it said .et_pb_text_inner, I switched it with .et_pb_team_member_description.

      Reply
      • Hemant Gaba

        Hi there!

        The customization has not yet been tested for the post-content module.

      • freek

        Hi, Does anyone know what code I use for the post content module instead of the text module?
        Something like this: (et_pb_module et_pb_post_content et_pb_post_content_0_tb_body pa-toggle-text)
        I am struggling with this …..

        THX Freek

    • Hemant Gaba

      Hey David,

      After analyzing your code, I realized that your jQuery is not right and that’s why the issue is happening. I will definitely help you but first I need to know the layout of the person module that you are having on the website as from your CSS I am imagining that you want to show and collapse only the description and not the photograph but I need to have an exact idea of what you are trying to achieve.

      Reply
      • Scott Winterroth

        Yeah, i’m trying to expand and collapse a very long bio in a person module. Can you post this code or fix the person’s above?

  63. Marcos mamani cruz

    hola como hacer un botón o un modulo q palpite así como tienes uno ¡hágase miembro! gracias soy de Lima PERU

    Reply
  64. Vijay Anand

    Hi Nelson, Can you make it such that, when it is collapsed the viewport should return to the top with the read more button again. Or can you please provide an improvised code for that functionality?

    Reply
    • Hemant Gaba

      Hi Vijay,

      I guess this is what the code does, if you click, it will open and if you click again, it will collapse. Does it behave differently for you?
      If yes then please remove the code you placed and share the URL so that I can check.

      Reply
      • Hemant Gaba

        Hi Gemma!

        We’re aware of the issue and working on it. The solution will be posted soon. Thank you!

      • Gemma

        Hi, we have used this code and it opens correctly when you press ‘Read more’ however on desktop and mobile when you press ‘read less’ it jumps to a random part of the page not returning them to the text module they expanded. Any one help? As Divi support said they can’t help as it’s the code. Thanks for your help, not sure who to ask and spotted this. Staging development site link added below for you to see.

      • VJ

        Hello, it should go back to top of collapsed text (scroll back effect) when u click on “Collapse To Read Less”. Otherwise it leave you wherever expanded text end. This is really problem for long text – it cause problem for users to miss a lot of content on page, especially on mobile phone.

  65. Sarah Austin

    You’ve been reading my mind again Nelson, I’ve been wondering for weeks how to do this with the ‘fade’ gradient on the text – thank you!!

    Reply
      • Lauren

        Hi Nelson, thanks for this helpful information! Is there a way to adjust the code so it functions only in table/mobile view? Would this be accomplished with a media query in the CSS? Thanks again!

      • Diana

        Hello, Nelson. Thanks for your valuable information.
        Could you please tell me how to do it in the “read more” part, how to do it inside a box. That’s possible?

        Thank you

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart