If you have a very long text paragraph in the Divi Text module or in the Divi Blurb module you can add an additional functionality to toggle the text and save some space on your page.
Enable Expand/Collapse Feature for Long Text in Divi Text Module.
If you have lengthy text paragraphs in the Divi Text or Divi Blurb modules and want to save space on your page, you can add a toggle feature to expand and collapse the text.
You can find below the steps to add the Toggle Feature:
Add the Divi Text Module:
Go to the Divi Text module settings.
Navigate to the Advanced tab and locate the "CSS ID & Classes" section.
Add a CSS Class:
In the CSS Classes field, enter:
divi-toggle-text.
Add JavaScript Code:
Go to your WordPress Dashboard.
Click on Divi, then Theme Options, and select Integration.
In the "Add code to the <head> of your blog" option, paste the following JavaScript code:
<script>
jQuery(document).ready(function() {
var divi_expand_text = "Show more...";
var divi_collapse_text = "Show less...";
var divi_expand_icon = "3";
var divi_collapse_icon = "2";
jQuery(".divi-toggle-text").each(function() {
jQuery(this).append('<div class= "divi-text-expand-button"><span class= "divi-text-collapse-button">' + divi_expand_text + ' <span class= "divi-text-toggle-icon">' + divi_expand_icon + '</span></div>');
jQuery(this).find(".divi-text-collapse-button").on("click", function() {
jQuery(this).parent().siblings(".et_pb_text_inner").toggleClass("divi-text-toggle-expanded");
if (jQuery(this).parent().siblings(".et_pb_text_inner").hasClass("divi-text-toggle-expanded")) {
jQuery(this).html(divi_collapse_text + "<span class= 'divi-text-toggle-icon'>" + divi_collapse_icon + "</span>");
} else {
jQuery(this).html(divi_expand_text + "<span class= 'divi-text-toggle-icon'>" + divi_expand_icon + "</span>");
}
})
})
})
</script>
4. Add thee Custom CSS code:
In your WordPress Dashboard, go to Divi, then Theme Options, and select General Settings.
At the bottom, find the "Custom CSS" option and add the following CSS snippet:
.divi-toggle-text .et_pb_text_inner {
max-height: 200px; /*=define the height of your text module=*/
transition: max-height 0.3s ease-out;
overflow: hidden;
}
.divi-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);
}
.divi-toggle-text .divi-text-expand-button {
padding: 0.5em;
text-align: center;
color: #000 !important;
font-weight: bold;
}
.divi-toggle-text .divi-text-expand-button span {
cursor: pointer;
}
.divi-toggle-text .divi-text-expand-button .divi-text-toggle-icon {
font-family: ETMODULES, "sans-serif";
}
.divi-toggle-text .divi-text-toggle-expanded {
max-height: 2000px;
transition: max-height 0.3s ease-in;
}
.divi-toggle-text .divi-text-toggle-expanded.et_pb_text_inner:after {
background: none;
}
Once it's done it should work like the GIF below:
Once you've completed these steps, your Divi Text module will have two states:
Clicking the "Show more" link expands to display the full content when clicked.
Clicking "Show less" will collapse it back to its original size.
FAQs
Can I apply Expanding Text for Other Divi Modules?
Yes, it is possible to implement the same expand/collapse text effect for other Divi modules that contain text, but this would require making minor modifications to the provided code. Please note that the code example we provided is tailored specifically for the Divi Text module.
Can I customize Icons and Text?
You have the flexibility to customize the icons and text for the "Show more" and "Show less" links. To make these changes, locate the following line in the JavaScript code:
var divi_expand_text.You can alter the text and icons by modifying the content within the quotation marks on that line. This way, you can achieve the desired result for your expand/collapse feature.