toggle/update container height when accordion opens

toggle/update container height when accordion opens

hello,

I want to set a container's height dynamically (and maybe animate) when I open the accordion menu.

this is my html code
  1. <div id="top"></div>
  2. <div id="container">
  3.   <div id="left">
  4.     <div class="logo"></div>
  5.     <nav id="menu">
  6.       <ul class="menu">
  7.          <li><a href="#">link</a></li>
  8.          <li><a href="#">link</a>
  9.               <ul class="submenu">
  10.                 <li><a href="#">link</a></li>
  11.                 <li><a href="#">link</a></li>
  12.                 <li><a href="#">link</a></li>
  13.                 <li><a href="#">link</a></li>
  14.                 <li><a href="#">link</a></li>
  15.               </ul>
  16.          </li>
  17.          <li><a href="#">link</a></li>
  18.          <li><a href="#">link</a></li>
  19.       </ul>
  20.     </nav>
  21.     <div class="bottom"></div>
  22.   </div>
  23.   <div id="right"><!-- content goes here --></div>
  24. </div>
  25. <div id="footer"></div>
and here is my shortened css
  1. html, body {
  2. padding:0;
  3. margin: 0;
  4. height: 100%;
  5. }
  6. #top, #footer {
  7. height: 20px;
  8. position:relative;
  9. z-index:2;
  10. }
  11. #container {
  12. width: 1000px;
  13. margin: 0 auto;
  14. min-height: 100%;
  15. margin-top: -40px; /*this clears the 40px top&footer overflow */
  16. overflow: hidden; /*this is sadly needed because of the design*/
  17. }
  18. #left {
  19. width: 230px;
  20. min-height: 100%;
  21. float: left;
  22. position: relative;
  23. margin-top: 40px;
  24. }
  25. #right {
  26. margin-left: 230px;
  27. min-height: 100%; /*actually this is not necessary but looks better :) */
  28. margin-top: 40px;
  29. overflow: hidden;
  30. position: relative;
  31. }
  32. .logo {
  33. width: 100%;
  34. height: 210px;
  35. }
  36. nav ul li {
  37. list-style: none;
  38. min-height: 30px;
  39. }
  40. .bottom {
  41. width: 100%;
  42. height: auto;
  43. position: absolute;
  44. bottom: 10px;
  45. }
and here is my jQuery code which isn't good since I misscalculated the amount of submenus

  1. jQuery(document).ready(function($) {
  2.     var dHeight = $(document).height();
  3.     var wHeight = $(window).height();
  4.     if(dHeight > wHeight) {
  5.         $('#container').css('height', dHeight+'px');
  6.     }else {
  7.         $('#container').css('height', '100%');
  8.     }
  9.    
  10.     $("ul.menu > li > a").click(function(){
  11.         if(false == $(this).next().is(':visible')){
  12.             $('ul.menu ul.sub-menu').slideUp(300);
  13.         }
  14.         $(this).next().slideToggle(300);
  15.     });
  16. });
the basic idea was that if there is only a little content than set the container height to 100% to fill the browser window but I didn't know how many submenus will be there and now if the container height is 100% the accordion slides under the .bottom and than a part of it dissapears because of the container's overflow hidden.
So this is why I would like to update the height when the accordion opens but I couldn't figure out how.