How To Expand And Collapse Text In Divi Like A Read More Toggle Tutorial by Pee Aye Creative

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

In this tutorial I will show you how to make text that can collapse and expand with a read more button in Divi.
Categories: Divi CSS Tutorials

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.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

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. 

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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!

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>

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;
}
20

Last updated Oct 6, 2021 @ 12:00 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

OUR ONCE A YEAR SALE IS HAPPENING NOW!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

13 Comments

  1. 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
  2. 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
  3. 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
  4. 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
    • 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
  5. 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

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

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

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart