Hide and reveal any section, row or module with a click on a button like a toggle
As a designer/developer sometimes i face some requests from my customers that i haven’t made before. One of the things i have been trying to accomplish was having blurbs open another section, row or module when clicked upon and then close when i click on another blurb.
The goal was having a nice a clean site without having much visible content on the site with a hide and reveal option – This one i made on a membershipsite that i’m currently designing/developing. You can see it in action here:
Hide and reveal with blurbs
In this tutorial i’ll show you how to use the Blurb-modules(5 of them) as buttons and when clicked upon, each blurb will reveal a section, row or module somewhere else on the site.
So first of all what is it that i’m talking about? Have a look and try out the blurbs here:
Step 1.
The first thing to do is getting your layout on track. Here i have created 5 blurbs and 5 rows with text in it. Go to step 2.
Step 2.
We give each Blurb their own unique css class: “rv_button1 closed” where rv_button1 is the trigger.
Open the Blurb – go to Advanced – give it a css class: rv_button1 closed – save and continue to the next Blurb with rv_button2 and so on till you have all your buttons set.
Step 3.
Next step is to give your sections, rows or modules an css id, so it gets triggered when clicking on one of the Blurbs.
Open your layout nr. 1 – in my case it a row – i then go to Advanced and enter the following in the css id-field: reveal1 and this will i do on every single section, row or module that i want to have the reveal and hide option.
The next section, row or module get the css id: reveal2 and the next css id: reveal3 and so on..
Step 4.
Now we are getting to the fun part… Add a code-module. This is where we are going to put our JavaScript. Get the JavaScript-code in the last step – save your layout and your are good to go.
As a sidenote – you don’t have to put the JavaScript-code in a code-module, you can also just put it in under Divi Settings – Integration – Header.
Step 5.
<script type=”text/javascript”>
jQuery(document).ready(function() {
// Hide the div
// jQuery(‘#reveal’).hide();
jQuery(‘.rv_button1’).click(function(e){
e.preventDefault();
jQuery(“#reveal1”).slideToggle();
// Hide the div
jQuery(‘#reveal2’).hide();
jQuery(‘#reveal3’).hide();
jQuery(‘#reveal4’).hide();
jQuery(‘#reveal5’).hide();
jQuery(‘.rv_button1’).toggleClass(‘opened closed’);
});
});
</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();
// Hide the div
jQuery(‘#reveal1’).hide();
jQuery(‘#reveal3’).hide();
jQuery(‘#reveal4’).hide();
jQuery(‘#reveal5’).hide();
jQuery(‘.rv_button2’).toggleClass(‘opened closed’);
});
});
</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();
// Hide the div
jQuery(‘#reveal1’).hide();
jQuery(‘#reveal2’).hide();
jQuery(‘#reveal4’).hide();
jQuery(‘#reveal5’).hide();
jQuery(‘.rv_button3’).toggleClass(‘opened closed’);
});
});
</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();
// Hide the div
jQuery(‘#reveal1’).hide();
jQuery(‘#reveal2’).hide();
jQuery(‘#reveal3’).hide();
jQuery(‘#reveal5’).hide();
jQuery(‘.rv_button4’).toggleClass(‘opened closed’);
});
});
</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();
// Hide the div
jQuery(‘#reveal1’).hide();
jQuery(‘#reveal2’).hide();
jQuery(‘#reveal3’).hide();
jQuery(‘#reveal4’).hide();
jQuery(‘.rv_button5’).toggleClass(‘opened closed’);
});
});
</script>