Stopping jQuery equal height divs from calculating hidden content
<p>I am using the following jQuery to giv certain divs with the id's <code>#main</code>, <code>#sidebar</code>, <code>#side-event</code> equal height. On most pages, I am using <code>.hide();</code> to toggle information within the content section of the site. The problem is when JS caluclates the height of the #main div, it's calculating all of the hidden content as well, which I do not want. How can I alter my code so that the height is equal to the tallest div, and not include the hidden information in the equation? In addition I added the code I am using to hide the information upon page load. Here is my page from the site for referencing the issue. Hoping someone can help me with this issue.</p>

<p><a href="http://shadowfaxdigital.com/cdi/events/mba-essentials-business-design-workshops/" rel="nofollow">http://shadowfaxdigital.com/cdi/events/mba-essentials-business-design-workshops/</a></p>

<p>Calculating height:</p>

<pre><code>    $("#main, #sidebar, #side-event").addClass("heights");

    var highestCol = Math.max($('#main').height(),$('#sidebar').height(), $("#side-event").height());

    $('.heights').height(highestCol);
</code></pre>

<p>Code used to hide the content in the toggles:</p>

<pre><code>          //jQuery toggle
            $(".toggle_container").hide();
            $("h2.trigger").click(function(){
                $(this).toggleClass("active").next().slideToggle("slow");
            });
</code></pre>
