If you have the Beaver Theme here is how you can add Bootstraps Collapse effect to a Beaver Builder row or module can be achieved using the Bootstrap data-toggle attribute.

Let’s say you have a button which when clicked reveals a module below it and another click hides the module again. As below…


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.

Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Create the button in a HTML module and give the button a data-toggle=”collapse” attribute and a link of href=”#collapseExample”

<a data-toggle="collapse" href="#collapseExample" class="fl-button">Show Me</a>

Then in the text module below add a class of collapse and id of #collapseExample

Bootstrap Add Class Id


Add some CSS for Beaver Edit Mode

Typically the module/element we are hiding will be hidden in the Beaver Builder edit mode- so some CSS is needed…

.fl-builder-edit  .collapse:not(.show) {
    display: block;

Data Attributes

If you want to use the actual button module instead of a HTML module for the button link, you can’t as one of the limitations is the module cannot have the data-toggle attribute added. You can add data-attributes with a plugin or by code, but they add the attribute to the fl-module not the element, but handy to know all the same.

Via Javascript

Another to do this effect is via Javascript instead of data-attributes, still give both elements the href, class and ID values – then add some jQuery in a document ready function.


So we are targetting the button or link with the class of .fl-button and the target has a class of .collapse

If you don’t have Bootstrap and alternative approach is to use jQuery SlideToggle.


Leave a Reply