The Example
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
Thank you so much. That was super helpful 🙂
Really glad to hear it Pris!
Thank you for this! Much appreciated.
I was wondering how to change the button arrow to point down and up based on the content hiding or showing?
Thanks so much for this, after a couple of attempts I got it to work!
Really glad Lucie!
easy tutorial which works great!
Thanks 4 the good Work ^^
I think this one could be simplify further.
Let say for toggle icon, we can put another class beside the rv_button1, use rv for example for all button, so the button hold two class of rv and rv_button1 , rv and rv_button2 respectively.
Daniel, this is so helpful! Out of curiosity, is there a way to make the first section open by default?
Hi Steve,
If you change the code for Reveal 1 to the following this should work for you.
jQuery(document).ready(function() {
// Hide the div
jQuery(‘#reveal1’).show();
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();
});
});
Note the 4th line has changed from .hide to .show
Hope this helps!