AutoHeight Variable

AutoHeight Variable

Here at work this morning with more complete source code. Here's a
better description of what I'm trying to accomplish. The Height variable
in my Javascript code is right now static and set at 320px vertical.

The problem is that since my height is predefined, yet my
internals are dynamic because of the accordion menu, as soon as
my menu accordions out, most of my content is then hidden. I will
need to compress these into on js plugin, (probably be foremost),
and great a height variable that will expand and contract with its
content.

Source for Sidebar:
var isExtended = 0;
var height = 320; // This is the Variable that I need to be made Dynamic
var width = 200;
var slideDuration = 1000;
var opacityDuration = 1500;

function extendContract(){
   if(isExtended == 0){
      sideBarSlide(0, height, 1, width);
      sideBarOpacity(0, 1);
      isExtended = 1;
      // make expand tab arrow image face left (inwards)
      $('#sideBarTab').children().get(0).src =
$('#sideBarTab').children().get(0).src.replace(/(\.[^.]+)$/, '-active$1');}
   else{
      sideBarSlide(height, 0, width, 1);
      sideBarOpacity(1, 0);
      isExtended = 0;
      // make expand tab arrow image face right (outwards)
      $('#sideBarTab').children().get(0).src =
$('#sideBarTab').children().get(0).src.replace(/-active(\.[^.]+)$/, '$1');}}

function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth) {
   $("sideBarContents").css ({'height': fromHeight, 'width': fromWidth});
   $("#sideBarContents").animate( { 'height': toHeight, 'width': toWidth }, {
'queue': false, 'duration': slideDuration }, "linear" );}

function sideBarOpacity(from, to){
   $("#sideBarContents").animate( { 'opacity': to }, opacityDuration, "linear"
);}

$(function(){
  // Document is ready
   $('#sideBarTab').hover( function() { extendContract(); return false; });
});

$(document).ready(function() {
});


Source For Expanding Menu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

      <head>
      <script src="js/jquery.js" type="text/javascript"></script> 
         <script type="text/javascript" src="js/sidebar.js"></script>
            <script type="text/javascript">
               <!--   
               $(document).ready(function () {
                 $('LI.drawer H2:not(.open)').next().hide();
                 $('H2.drawer-handle').click(function () {
                  $('LI.drawer UL:visible').slideUp().prev().removeClass('open');
                  $(this).addClass('open').next().slideDown();
                 });
               });
               //-->
               
            </script>
      </head>
<body>

<div id="sideBar">

#  images/main/slide-button.png   
  <div id="sideBarContents">
<div class="sideBarContentsInner">
   <h2 class="drawer-head">sidebar</h2>

      <ul class="drawers">
         <li class="drawer">
            <h2 class="drawer-handle">...</h2>
            <ul><li> # ... </li></ul>
         </li>
      </ul>
      </div>
   </div>
</div>  <!-- "sidebar" -->
</body>
</html>