I gotta tell you: I’m kinda hooked with what the jQuery Toggle() function combined with Elegantthemes’ Divi can do. It’s almost magical, but so simple so that everyone can do it. In the following example I want to share my latest Divi experiment.

What we’re going to build:

What is the jQuery toggle function ?

The toggle() funtion of jQuery (an awesome javascript library for building websites) can display or hide matched elements. When the element in question (like a Div-Container) is displayed in the moment the function got triggerd, the element will go hide and the other way round. In this example I’m using the slideToggle() function, which combines the hiding with a neat and simple slide animation.

Our luck that Divi has the jQuery library already included so we can go ahead and start right off with our fun little project.

Building our test page with the Divi Builder

Let’s create a new page using the Divi Builder. We create 3 normal sections: Two for displaying a text, and one section for a simple menu in between. Take a look at the following picture to get a quick overview on how I build my testpage.

 

Don’t be afraid: you will not going to see the first and the third section in the beginng, cause of the “display:none” we added. That’s cool, we gonna slide them in with the slideToggle() function later on. But before we will add some little css to get a little interaction on those blurb icons.

Add CSS

.et-pb-icon { cursor:pointer; }
.et-pb-icon:hover { color:black !important; }

I added this CSS snippet within the page’s divi-builder options (on the right upper corner) so it won’t affect other et-pb-icons on other pages.

Add jQuery / Javascript

Head over to the WordPress Dashboard > Divi > Theme Options > Integration > Add code to the < head > of your blog

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery("#menu_option_one .et-pb-icon").click(function() {
jQuery("#menu").slideToggle();
jQuery("#option_one").slideToggle();
});

jQuery("#menu_option_two .et-pb-icon").click(function() {
jQuery("#menu").slideToggle();
jQuery("#option_two").slideToggle();
});

jQuery("#back_option_one .et-pb-icon").click(function() {
jQuery("#menu").slideToggle();
jQuery("#option_one").slideToggle();
});

jQuery("#back_option_two .et-pb-icon").click(function() {
jQuery("#menu").slideToggle();
jQuery("#option_two").slideToggle();
});

});

</script>

That’s all folks ! Go here for a real live example (NOT AVAILABLE ANYMORE). Leave a comment if you have any questions or concerns.

You can download the Divi Builder Layout + the Javascript Snippet here:
Download