The Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum orci, mollis et felis et, eleifend egestas purus. Vivamus erat sapien, pellentesque et maximus luctus, eleifend nec erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla fringilla arcu eget sem blandi

Curabitur commodo metus sit amet dignissim semper. Nulla semper accumsan lacus, et varius justo gravida pellentesque. Praesent vel nisi eget ipsum congue imperdiet. Mauris dolor lectus, suscipit eget rhoncus ut, fermentum quis sapien. Sed tempor turpis est, vel pharetra erat maximus et. Integer eu magna in

This tutorial is based on a blog post produced by Divi Notes, where they explain how to create a single collapsible module, section or row with the click of a button, using the button module or call to action module. Their solution is great; however, it has one small flaw, which is clear in the comments section: it doesn’t allow users to create several collapsible components on the page. Fortunately, we have come up with a solution!

In this tutorial, we will show you how to add up to six collapsible components, using several independent buttons.

Step One – Add Your Code.

Copy and paste the CSS code below into your website’s Divi Theme Customizer  > Custom CSS

.rv_button1.closed:after {content:”\\2002″;}
.rv_button1.opened:after{content:”\\2002″;}
.rv_button2.closed:after {content:”\\2002″;}
.rv_button2.opened:after{content:”\\2002″;}
.rv_button3.closed:after {content:”\\2002″;}
.rv_button3.opened:after{content:”\\2002″;}
.rv_button4.closed:after {content:”\\2002″;}
.rv_button4.opened:after{content:”\\2002″;}
.rv_button5.closed:after {content:”\\2002″;}
.rv_button5.opened:after{content:”\\2002″;}
.rv_button6.closed:after {content:”\\2002″;}
.rv_button6.opened:after{content:”\\2002″;}

Copy and paste the Javascript code below into your website’s Divi Theme Options  > Integrations > Add code to your blog.

<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal1').hide();
jQuery('.rv_button1').click(function(e){
e.preventDefault();jQuery("#reveal1").slideToggle();
jQuery('.rv_button1').toggleClass('opened closed');
jQuery('#reveal2').hide();
jQuery('#reveal3').hide();
jQuery('#reveal4').hide();
jQuery('#reveal5').hide();	
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal2').hide();
jQuery('.rv_button2').click(function(e){
e.preventDefault();jQuery("#reveal2").slideToggle();
jQuery('.rv_button2').toggleClass('opened closed');
jQuery('#reveal1').hide();
jQuery('#reveal3').hide();
jQuery('#reveal4').hide();
jQuery('#reveal5').hide();
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal3').hide();
jQuery('.rv_button3').click(function(e){
e.preventDefault();jQuery("#reveal3").slideToggle();
jQuery(".rv_button3").toggleClass('opened closed');
jQuery('#reveal1').hide();
jQuery('#reveal2').hide();
jQuery('#reveal4').hide();
jQuery('#reveal5').hide();
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal4').hide();
jQuery('.rv_button4').click(function(e){
e.preventDefault();jQuery("#reveal4").slideToggle();
jQuery('.rv_button4').toggleClass('opened closed');
jQuery('#reveal1').hide();
jQuery('#reveal2').hide();
jQuery('#reveal3').hide();
jQuery('#reveal5').hide();
});
});
</script>

<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal5').hide();
jQuery('.rv_button5').click(function(e){
e.preventDefault();jQuery("#reveal5").slideToggle();
jQuery('.rv_button5').toggleClass('opened closed');
jQuery('#reveal1').hide();
jQuery('#reveal2').hide();
jQuery('#reveal3').hide();
jQuery('#reveal4').hide();
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
// Hide the div
jQuery('#reveal6').hide();
jQuery('.rv_button6').click(function(e){
e.preventDefault();jQuery("#reveal6").slideToggle();
jQuery('.rv_button6').toggleClass('opened closed');
jQuery('#reveal1').hide();
jQuery('#reveal2').hide();
jQuery('#reveal3').hide();
jQuery('#reveal4').hide();
jQuery('#reveal5').hide();
});
});
</script>

Step Two – Add To Your Page.

1. Add your button or call to action and in the module’s settings add “#” to the button URL link.

2. Then, in your modules settings, go to Advanced Tab > CSS ID & Classes and Add “rv_button1” to the CSS Class.

3. Go to the row, section or module you would like to hide and then show when this button is clicked. Open its settings and then go to Advanced Tab > CSS ID & Classes and Add “reveal1” to the CSS ID.

To add more collapsible sections, all you need to do is repeat the process above but change the number in the CSS class and CSS ID seen above from 1 to 2, 3, 4, 5, or 6. Make sure that for each button, the CSS class ID has the same number as the module, section or row you are trying to hide.

Written by Daniel Barrow

Written by Daniel Barrow

Daniel is the Managing Director of Get Me Marketing and a self-proclaimed guru of everything marketing. As a result, he loves to distill his experience and knowledge in marketing, website development and graphic design to the world!

Daniel is the Managing Director of Get Me Marketing and a self-proclaimed guru of everything marketing. As a result, he loves to share his experience and knowledge of marketing, website development and graphic design with the world!

Written by Daniel Barrow

Daniel is the Managing Director of Get Me Marketing and a self-proclaimed guru of everything marketing. As a result, he loves to distill his experience and knowledge in marketing, website development and graphic design to the world!

Get Me Marketing
181 Wylds Lane
Worcester
Worcestershire
WR5 1DZ


 

Get Social With Us!

T: +44 1905 350 186
E: daniel@getme.marketing