Adding Bootstraps Collapse to a Beaver Builder button and module

September 20, 2020 -

If you have the Beaver Theme as your WordPress 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 and data-target attribute.

You need to have the full bootstrap enabled in the theme, not the minimal version.

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

Example

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 data-target of data-target=”#collapseExample”

<a data-toggle="collapse" data-target="#collapseExample" href="#" role="button" aria-expanded="false" 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.

You can add some CSS to include some toggle items:

a[aria-expanded="true"]::after {
	content: '\f077';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #32407b;
	font-size: 13px;
	margin-left: 5px;
}

a[aria-expanded="false"]::after {
	content: '\f054';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #32407b;
	margin-left: 5px;
	font-size: 13px;
}

Via Javascript

Another way 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.

jQuery(".fl-button").click(function(){
    jQuery(".collapse").collapse('toggle')
});

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.

Related Posts:

Categorized Javascript/jQuery, WordPress Tagged , , ,