Question

I’m using this jQuery plugin to get the main content and sidebar to match heights—which works fine. But I am now updating a member directory page, and I’ve set up the names to expand from a basic listing to a full listing when they are clicked. However, I can’t get the content and sidebar divs to expand and contract with them.

Here’s a sample page with dummy content: http://stylesmithonline.com/AWAD_test/AWAD_directory_test.html (Note: I know I need to move those onClick events to their own function—someone else created the original site, so I’ve got some cleaning to do).

I tried adding the class “expand” to the links and calling on the function with this:

$(document).delegate('.expand', 'click', function(){
$("#content, #sidebar, #content-sidebar-wrap").equalHeightColumns();
});

It works one time if I remove the original call to the function:

$(window).load(function() {
$("#content, #sidebar, #content-sidebar-wrap").equalHeightColumns();
});

Also, if I pass in a specific height to the click event, it will work.

Any idea why it’s not expanding and contracting the way I want it to?

Thanks,
Scott

Answer 1

Looking at the documentation, I believe it’s not working because the height is set by reading the height of the div. Your main div, however, has a height set by the plugin already, and this doesn’t change when more content is added.

Try resetting the height of your divs to auto before calling the plugin:

$("#content, #sidebar, #content-sidebar-wrap").css('height','auto').equalHeightColumns();

Also, if you’re trying to match heights because of the white background, allow me to suggest an alternative: use the Faux Columns technique. Could save you many headaches.