Article du fil d'actualités de CreaWeb2B

N'hésitez pas à commenter et partager

Custom toggle section in DIVI

by | 10 Mar,2017 | DIVI, Tutorials, Webdesign

Here goes a little tutorial to achieve something i was asked for on a facebook forum.

It seems common for church websites to have a “new here” section, hidden but available to display for those who aren’t familiar with the church.

What we need is a little jQuery snippet to hide a given section and display it when a call to action is triggered.

In this tutorial, you can see the toggle in action. In the “New to church” section, there is a “More Information” button that will open a div displaying desired content for people needing more information.

Let’s try to play with the button.

NEW TO CHURCH

Donec consequat velit pharetra, lobortis ex id, hendrerit neque. Sed in mi porta, sagittis nunc et, ullamcorper nunc. Suspendisse id quam lorem. Morbi interdum lacus urna, quis consequat nisl condimentum et. Donec odio felis, ornare eleifend pharetra sed, convallis sit amet erat. Etiam bibendum rutrum lorem, in placerat tortor gravida ut. Integer gravida pharetra congue. Donec eu interdum nisi, finibus mattis erat. Aenean molestie nisi tellus, non gravida neque facilisis gravida. Mauris sagittis rhoncus turpis, ullamcorper ornare turpis volutpat aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum vulputate urna, ut varius odio pharetra ac. Aenean elementum eleifend eros, vitae finibus lorem lacinia non. Integer tincidunt fermentum diam vel semper.

And now is time to show you how to do a toggle like this one.

The code will target the given element and will toggle it visible or not when trigger is clicked. Here the trigger is a button but it can be a link, an image, an icon, an entire section… Whatever you want. The only important thing is to give the trigger a specific CSS Class

Here the class need to be “nh_button closed” (closed is just a class that will be changed to opened when the trigger will be launched)

When the element with class “nh_button” is clicked, the code seeks a div with id of “newhere” and set is toggle to visible, the trigger class is also toggled from “closed” to “opened” in order to apply specific CSS style.

No need to explain further, let’s see what we have in builder and the code that we need to add to the code module.

In this post i’m already inside a section, so i’ll only use rows but you can use entire section if you want. What is important is trigger class and target id. here the trigger is the button module and the target is the row containing the content to display. You can add how many module you need to the target (so in you case a section will be better, in order to access row and multiple column content)

Let’s open button module settings (3 horizontal lines on left side of module)


And let’s name our button. Set url to “#”

you can use button advanced settings to give a style to you button. Let’s set the icon to be visible even when not hovered, and you don’t need to select an icon because the css will overwrite this style.

Next and most important part is to add CSS class to our button

And finally, we need to add a given CSS id to the target. Open the section (if you’ve got a section for the content) or the row (here it’s what i have) settings by clicking on the 3 horizontal lines on the left of blue tab for section, green tab for row

And set the CSS id to “newhere”

All is set up in order to build our toggle

Let’s set the following content inside the code module. The css style goes for the icons for opened and closed button.

<style type="text/css">
.nh_button.closed:after {content:"\33";}
.nh_button.opened:after{content:"\32";}
</style>
<script type="text/javascript">
 jQuery(document).ready(function() {
// Hide the div
jQuery('#newhere').hide();
jQuery('.nh_button').click(function(e){
e.preventDefault();jQuery("#newhere").slideToggle();
jQuery('.nh_button').toggleClass('opened closed');
});
});
</script>

You’re done. Feel free to ask if you’ve got any question about that.