Adding jQuery Slide Toggle to a Beaver Builder button and module

Adding a jQuery Slide Toggle effect to a Beaver Builder row or module can be achieved with some Javascript and CSS.

Let’s say you have a button which when clicked reveals a module below it and another click hides the module again, give the button a class of .trigger-button and the module an ID of #trigger-target

Add some jQuery

jQuery(".trigger.button").not('.fl-builder-edit .trigger.button').click(function(event){
    event.preventDefault();
    jQuery("#trigger-target").slideToggle();
  });

Above we are selecting the button but not when it is in Beaver Builder edit mode, preventing the default click action and slide toggling the module.

Add some CSS

Typically the module/element we are sliding should initially set to he hidden – so some CSS is needed…

#trigger-target {
	display: none;
}

.fl-builder-edit #trigger-target {
	display: block;
}

2 CSS properties are used, the 2nd one allows the module to always be visible in the builder editor. ( If you want the module/element initially visible then don’t worry about the CSS.

If the code is not your cup of tea then there’s always a plugin.