Enhancing the interactivity of your website can significantly improve user experience. In Divi, Toggle Modules are great for organizing content, but manually opening and closing each one can be cumbersome for users.
By using the Button Module, you can create a more efficient and user-friendly experience by allowing visitors to open or close all Toggle Modules with a single click.
This article will guide you through the steps to set up this functionality, making your website more interactive and easier to navigate.
On your page, add the Button module
Open the Button's module settings by clicking on the Gear Icon
Go to Advanced Tab → CSS ID & Classes → CSS Class and type in divi-open-toggle-button
For each Toggle module that you want to be controlled, click on the button, open the settings, and go to Advanced Tab → CSS ID & Classes → CSS Class and type in divi-open-toggle-module
Go to WordPress Dashboard → Divi → Theme Options → Integrations Tab and copy/paste this jQuery code:
<script>
$(document).ready(function () {
$('.divi-open-toggle-button').click(function (e) {
e.preventDefault();
$('.divi-open-toggle-module').each(function () {
if ($(this).hasClass('et_pb_toggle_close')) {
$(this).removeClass('et_pb_toggle_close').addClass('et_pb_toggle_open');
$(this).find('.et_pb_toggle_content').show();
} else {
$(this).removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');
$(this).find('.et_pb_toggle_content').hide();
}
});
});
});
</script>
The result can be seen in the GIF below:
