Use with expanding content

Hello MaryMak,

Equal Height Columns is set to recalculate the heights whenever the window is resized, but it also includes a direct JS method $.equalizeTheHeights() that you can use to force a recalculation of the heights whenever something else like an accordion expanding happens.

The key is to hook into a JS event that fires right when the heights are ready to be measured. I’ve looked at your page but I’m not sure what method you’re using to expand the accordions. Hopefully there is a suitable event that is fired or your controlling the JS yourself so you can trigger the recalculation directly.

Here is some quick example JS that demonstrates the concept:

jQuery( '.tb-toggle' ).on( 'click', function() {
	setTimeout( function() {

		jQuery( '#sidebar_layout .fixed-sidebar,#sidebar_layout #content' ).equalizeTheHeights();

		console.log( 'equal heights has retriggered' );

	}, 1000 );
});

This method isn’t ideal, because all it does is say whenever one of the toggles is clicked, wait 1 second and then recalculate the heights. It would be more ideal to fire it immediately after the accordion has been expanded, either by hooking into a JS event fired at that point, or calling the $.equalizeTheHeights() method directly at that point, or if you’re using CSS transitions, set the timer value above to be just after the CSS transition will be finished.

I hope this helps. If you paste the code above into the console, you’ll see the recalculation happening.

Wonderful! Thank you so much. The theme uses the Bootstrap collapse script so I updated your code to the following:

var equalToggle = function() {
 setTimeout( function() {

		jQuery( '#sidebar_layout .fixed-sidebar,#sidebar_layout #content' ).equalizeTheHeights();

		console.log( 'equal heights has retriggered' );

	});
}

$('.tb-toggle').on('shown.bs.collapse', equalToggle);
$('.tb-toggle').on('hidden.bs.collapse', equalToggle);

I really appreciate your quick and helpful response!

Glad to hear you were able to get it working. Your code looks good but I would remove the call to setTimeout, as currently you are calling setTimeout but not passing a time value as the second param, which is in effect setting up a timer and then immediately executing the function on the timer.

I included the setTimeout call in my example just because I knew that the collapsing/expanding action happened over a duration and I wanted to make sure the height recalculation happened after the collapsing/expanding was done, but since it looks like you’ve found direct events to listen for, I think you no longer need the setTimeout.

So, continuing on with the code you provided, it can probably be simplified to:

var equalToggle = function() {
	jQuery( '#sidebar_layout .fixed-sidebar, #sidebar_layout #content' ).equalizeTheHeights();
};
$('.tb-toggle').on('shown.bs.collapse', equalToggle);
$('.tb-toggle').on('hidden.bs.collapse', equalToggle);

Thanks for using Equal Height Columns! ??

Done. Thank you so much!

P.S. I wanted to donate to your plugin but the link takes me to your website.

Hi again,

I know you are not my personal programmer but I’m having the same issue with Gravity forms and conditional fields. I asked them to help me include their hook into the code you provided and this is what they said:

You can use the gform_post_conditional_logic_field_action hook to run custom code when a field has been hidden or displayed by conditional logic. See the following page of the documentation: https://www.gravityhelp.com/documentation/article/gform_post_conditional_logic_field_action/

I can’t figure out how to work that into what we’ve already done for toggles. Does it need to be done differently?

In that case you should be able to do something like this:

gform.addAction('gform_post_conditional_logic_field_action', function () {<br />
    jQuery('custom_selector').equalizeTheHeights( minHeight, maxHeight, breakPoint );<br />
});

Just keep in mind that you’ll have to replace custom_selector with the actuall jQuery selector of the elements you’re trying to equalize, and will also have to replace minHeight, maxHeight, and breakPoint with actual values (can be null if you don’t want to limit any of these parameters).

Let me know if that helps!