JQUERY - Container match biggest height -

i'm having problems getting container div match height of children.

basically i'm trying achieve container height increase when children inside open. inside container 2 panels slidetoggle independently when clicked. both have different heights. want container match height of biggest panel opened. if no panels open, height of container should "auto".

so in nutshell, theres 2 panels, each different heights. want container match height of biggest panel available (open). if both panels open, , user closes biggest one, container should compensate meet height of other panel. if user closes both panels, height of container should return "auto"

this example of code:

<div class="container"> <a href="#panel1">panel 1 button</a> <a href="#panel2">panel 2 button</a>  <div id="panel1" class="panel"></div> <div id="panel2" class="panel"></div> </div>  $(document).ready(function() {  // add 'height' content container if window small     var content = $(".container");       var childheight = $('#panel1, #panel2').height();      if ($(content < childheight)) {     $(content).css("height", childheight + "px");     }  }); 

if i've confused im sorry! :)

heres jsfiddle of i've got to...

http://jsfiddle.net/msswy/ 

var heights = $("div.panel").map(function ()     {         return $(this).height();     }).get(),      maxheight = math.max.apply(null, heights); 

or can achieve using piece of css code shown below

.container {     overflow: hidden;     position: relative; } 

then .panel these:

.panel {     height: 100%;     position: absolute;  }