Create Show More Toggle in Divi for different Modules

Autor: Gabriel Widemann, February 2023

In this tutorial you will learn how to create a classical ‚Show more‘ button for revealing text. You can use the steps provided here for many different Divi modules e. g. Text, Blurb or any other module that includes a TinyMCE. TinyMCE is just the name of the standard text editor. The code is based on Lamouri Mohamed’s Codepen.

Add neccessary CSS Code

Go to Divi / Theme Options / General and on the bottom of the site add the following CSS code to ‚Custom CSS‘

.hide-part {
   display: none;
.show-part {
   display: block;
.show-more {
   color: black;
   font-weight: bold;
   cursor: pointer;

You can change the styling of the show-more class as you want e. g. change the color oft the text.

Add neccessary JavaScript Code

Go to Divi / Theme Options /Integration > Add code to the < body >

// Effect of Show more button
   $(„.show-more“).click(function(event) {
      var txt = $(„.hide-part“).is(‚:visible‘) ? ‚Show more‘ : ‚Show less‘;

You can change the ‚Show more‘ and ‚Show less‘ after the ? to any text you like.

Add neccessary HTML Code

In your Divi module go to Content/Text and in the Text Editor switch to Text (where ‚Visual‘ is normally selected). Now add the following code:

Text that is always displayed
<div class=“hide-part“>
   Text that only appears on clicking the Show More Button.
<a class=“show-more“>Show More</a>

Of course you can change the visible and hidden text to your content and again change the ‚Show More‘ between the a-tags.

Show more HTML code in Divi Module

With this simple code snippets you can add a ‚Show more‘ toggle to many different Divi modules. If you have any questions or feedback just leave a comment.

Unfortunately Divi’s code editor add some unneccessary signs (‚ or „) when copy and pasting code into it. So check the code twice because otherwise it won’t work!