Equal Height Columns + Beaver Builder Accordion

Beaver Builder
1

Hey guys!

First of all, I know absolutely bugger all about jQuery. CSS, HTML and PHP I’m fine with. jQuery may as well be Klingon. So please do dumb-down any responses in that regard!

So, I’m having an issue with the Equal Height Columns plugin and Beaver Builder Accordion.

According to GitHub I should be able to get the height to reload after an AJAX call, for example, using: jQuery( window ).trigger( ‘equalheights’ );

I’ve tried loading this function in the accordion with no success. No matter where I put it or how I call it I just can’t get it to adjust to the expanded height.

The problem can be seen here: http://swh-p.co.uk/live/services/

As you can see, the height of the content and sidebar have been matched. But when you click to expand an accordion item there’s no adjustment being made for the extra height - the content just expands over the footer.

I’d rather not go to the hassle of replacing the default sidebar with a beaver column and equalising the heights that way.

Is there any way to equalise the height of the sidebar while using accordion content?

2

Hey Jon,

Just took a look at your Website. Have you tried the new “Equalize Column Heights” feature in BB plugin? I’m sure you’ll get better results than this. Try using a blank page template, then use the “Right Sidebar” Row layout. Insert your preferred widgets into the sidebar column and your contents on another and set the column equal heights. I’ve attached a sample screenshot of the outcome. Let us know how it goes.

http://i.imgur.com/P4yXW0l.png

Thanks!

KC

3

Hey Jon,

If KC’s method above doesn’t work for you, you can try using the code below and see if it works.

jQuery( function() {
    jQuery( '.fl-accordion-button' ).on( 'click', function() {
        setTimeout( function() {
            jQuery( window ).trigger( 'equalheights' );
        }, 500);
    } );
} );

So the problem here is that we don’t have an event that triggers when the accordion opens/closes. Our lead dev will look at adding those along the way so you may easily hook into them. :slight_smile:

Ben

4

I’ve fallen back on the built-in ‘Equalize Column Height’ feature, and used a custom template and CSS to replicate the standard content and sidebar styles.

Thanks for your help, guys!

5

Awesome! Have fun with BB! :slight_smile:

Ben