jQuery > Tips
Tips
Back to Top Button
Make Two Divs the Same Height
Sometimes you'll want two divs to have the same height no matter what content they have in them: ``javascript $(".div").css("min-height", $(".main-div").height()); ` This example sets the min-height which means that it can be bigger than the main div but never smaller. However, a more flexible method would be to loop over a set of elements and set height to the height of the tallest element: `javascript var $columns = $(".column"); var height = 0; $columns.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $columns.height(height); ` If you want all columns to have the same height: `javascript var $rows = $(".same-height-columns"); $rows.each(function () { $(this).find(".column").height($(this).height()); }); `` > [!NOTE] > This can be done several ways in CSS but depending on what your needs are, knowing how to do this in jQuery is handy.
Chain Plugin Calls
Toggle Fade/Slide
Sliding and fading are common in animations with jQuery. You might want to show an element when a user clicks something, which makes the fadeIn and slideDown methods perfect, but if you want that element to appear on the first click and then disappear on the second, this will work fine: