Sometimes, we do not want to use the normal “Toggle” module of Divi, and so we want to make the “Button” module as the trigger to show the hidden content. This is definitely useful especially if there are going to be too many content/information on one page.

It does require some type of coding, but it is quite simple!

Make sure to watch the video to use the codes/information below!

Sample

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel enim nec tortor consequat tempor non vitae libero. Aliquam blandit enim metus, ac ultricies justo placerat in. Vivamus erat nunc, consectetur a dignissim quis, facilisis quis mi. Nullam dignissim sapien non purus eleifend convallis. Mauris lorem dolor, suscipit ac luctus vel, molestie a odio. Nulla eget aliquam magna. Cras vitae risus vel turpis venenatis auctor ac eget nisi. Phasellus nec sem et dolor tempus aliquam quis sed metus. Nulla sit amet orci feugiat erat fringilla ullamcorper vitae et orci. In lacinia in ipsum et pulvinar. Donec volutpat turpis a iaculis aliquet.

Sed lobortis neque porttitor velit scelerisque, eget sollicitudin metus vehicula. Vestibulum vel tempus mauris. In tempor erat sed metus ullamcorper aliquam. Nam sed nisi purus. Integer sit amet eros tincidunt arcu ornare egestas at et eros. Sed ut tellus non lorem feugiat pulvinar sit amet eget nulla. Aenean malesuada nunc sit amet sem lacinia pulvinar. Quisque fringilla augue sed felis scelerisque, quis laoreet nibh porttitor. Sed fringilla, erat sed feugiat pulvinar, nisl ante gravida nisi, non tempus mauris mauris vitae massa. Morbi quis nunc id nibh sodales porttitor. Praesent convallis rutrum felis, quis dictum libero congue sit amet. Mauris sed pulvinar nibh, ut bibendum nisl. Curabitur quis elementum felis, eget mollis metus. Etiam rhoncus condimentum euismod. Aliquam efficitur gravida ex in imperdiet. Aenean mollis consequat eleifend.

Video Tutorial:

Tutorial:

Step 1:

Add a row and add the information in it. In the example, I just made it simple and added a Text module using Lorem Ipsum.

Step 2:

Add a new row with the Button module. Feel free to edit the button’s design to your own liking!

Step 3:

Now, we’re going to go back to the first row (where I added the Text module with the Lorem Ipsum). Add a Code module, which will be the code to address or connect the information to be revealed and the button.

Here’s the code:

———

<style type=”text/css”>
.wp_button1.closed:after {content: “\33”;}
.wp_button1.opened:after{content: “\32”;}
</style>
<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(‘#wptext1’).hide();
jQuery(‘.wp_button1’).click(function(e){
e.preventDefault();jQuery(“#wptext1”).slideToggle();
jQuery(‘.wp_button1’).toggleClass(‘opened closed’);
jQuery(‘.wp_button1’).html(jQuery(‘.wp_button1’).html() == ‘Show Less’ ? ‘Show More’ : ‘Show Less’);
});
});
</script>

———

Step 4:

Add a CSS ID to the first row (the row with the Text module and Code module)

In this example, I’ve added the ID: wptext1

Step 5:

Add a CSS Class to Button module. Make sure to add it to the module and NOT the row where the button is in.

In this example, I’ve added the Class: wp_button1 closed

Additional Info:

1)

If you decide to change the ID and Class, make sure that you change the code accordingly. That’s why I have typed ID and Class in different colors to easily see them within the code. Here it is again with the colors:

(Orange for the Row ID & Magenta for the Button Class)

———

<style type=”text/css”>
.wp_button1.closed:after {content: “\33”;}
.wp_button1.opened:after{content: “\32”;}
</style>
<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(‘#wptext1‘).hide();
jQuery(‘.wp_button1‘).click(function(e){
e.preventDefault();jQuery(“#wptext1“).slideToggle();
jQuery(‘.wp_button1‘).toggleClass(‘opened closed’);
jQuery(‘.wp_button1‘).html(jQuery(‘.wp_button1‘).html() == ‘Show Less’ ? ‘Show More’ : ‘Show Less’);
});
});
</script>

———

2) To change the icons on the right of the text of the button

You might want to have a different icon in the button module, and you are welcome to do so! The bolded part in red of the code below is what you have to change:

———

<style type=”text/css”>
.wp_button1.closed:after {content: “\33“;}
.wp_button1.opened:after{content: “\32“;}
</style>

———

To know the icons available, they are viewable here: https://www.elegantthemes.com/blog/resources/elegant-icon-font. Search for “Complete Set and Unicode Reference Guide”, and you will see all the icons below. Below the icons are some characters, like &#xe04c; and you can add that directly to the bolded part in red.

So, in the example, in the code, for the new one, it will be:

———

<style type=”text/css”>
.wp_button1.closed:after {content: “&#xe04c;“;}
.wp_button1.opened:after{content: “&#xe04c;“;}
</style>

———

And then, you can now see the new icons!

(I kind of messed up on the video tutorial on this, and I’ve outlined the explanation below. You can use all the characters instead of just using the backslash (\) then adding the number. Sorry about that!)

3) To change the text before and after clicking the button

Maybe you’d want another text to show, not Show More or Show Less. Maybe something like See More or See Less, and that’s what we will use for this example. So, what you have to do is first, for the button itself, change the text from Show More to See More.

And then, now you have to change some parts of the code, which are bolded and colored accordingly. You have to change them from Show More > See More & Show Less > See Less

BEFORE

———

<style type=”text/css”>
.wp_button1.closed:after {content: “\33”;}
.wp_button1.opened:after{content: “\32”;}
</style>
<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(‘#wptext1’).hide();
jQuery(‘.wp_button1’).click(function(e){
e.preventDefault();jQuery(“#wptext1”).slideToggle();
jQuery(‘.wp_button1’).toggleClass(‘opened closed’);
jQuery(‘.wp_button1’).html(jQuery(‘.wp_button1’).html() == ‘Show Less‘ ? ‘Show More‘ : ‘Show Less‘);
});
});
</script>

———

AFTER

———

<style type=”text/css”>
.wp_button1.closed:after {content: “\33”;}
.wp_button1.opened:after{content: “\32”;}
</style>
<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(‘#wptext1’).hide();
jQuery(‘.wp_button1’).click(function(e){
e.preventDefault();jQuery(“#wptext1”).slideToggle();
jQuery(‘.wp_button1’).toggleClass(‘opened closed’);
jQuery(‘.wp_button1’).html(jQuery(‘.wp_button1’).html() == ‘See Less‘ ? ‘See More‘ : ‘See Less‘);
});
});
</script>

———

And there it is! Now the text has been changed!

If you need any help, feel free to leave a comment, and I would be more than happy to help!

Please do Like, Comment or Subscribe to my YouTube channel if it helped, too! Thanks!