Jquery Equal Heights And Dynamic Content

I found the following jQuery, and it works great for a page that does not have dynamic content in a grid loading on the page as you click from tab to tab. One tabbed section of the

Solution 1:

If you wrap the $('.content).each block in a function, you can then call the function to reapply the height equalising when you need to, such as when a tab is clicked, e.g.

$(document).ready(function () {

    functionequaliseIt() {
        $('.content').each(function () {
            var highestBox = 0;
            $('.equalcontentcolumn', this).each(function () {
                if ($(this).height() > highestBox)
                    highestBox = $(this).height();
            });

            $('.equalcontentcolumn', this).height(highestBox);
        });
    }

    //call the function at page loadequaliseIt();  
});

How are you changing the tab? Are you using a plugin or doing it manually?

If using a plugin, you might have access to a tabchange event or similar, which will be fired after the tab is changed, so you can use that to call the equaliseIt() function

If you're changing the tabs manually, just call the function after changing the tab

Solution 2:

You should add this code/function to the change-tab event. because this code will only be runned on load.