title: JQuery Animate Height to 100%
body: <p>I want to animate a menu (DIV) from height of 0% to 100% and vice versa. The <strong>hide menu</strong> code works. However, the <strong>show menu</strong> code simple fades in the element with a height of 100%. I want it to grow from 0% to 100%. Any ideas on how to solve this? I am fairly new to JQuery. </p>
  
  <p>JavaScript/JQuery
  </p>
  
  <pre class="lang-html prettyprint-override"><code>$(document).ready(function(e) {
      $('#mobileMenu-icon').click(function(){
          if ($('.LEFTNAV-content').hasClass("hide-menu")){
          // Show menu
              $('.LEFTNAV-content').animate({'height':'100%'}, {queue: false});
              $('.LEFTNAV-content').fadeIn('normal');
              $('.LEFTNAV-content').removeClass('hide-menu');
              $('.LEFTNAV-content').addClass('show-menu');
          }
          else{
          // hide menu
              $('.LEFTNAV-content').animate({'height':"1px"}, {queue: false});
              $('.LEFTNAV-content').fadeOut('normal');
              $('.LEFTNAV-content').removeClass('show-menu');
              $('.LEFTNAV-content').addClass('hide-menu');
          }
      })
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre class="lang-html prettyprint-override"><code>.column-wrapper{ height: auto; }
  
  .LEFTNAV-content{
      display:none; 
      overflow: hidden;
  }
  .hide-menu{ display: none; }
  
  .show-menu{
      display: block;
      height: 1px;
  }
  .box1{
      overflow: hidden;
      height: auto !important;
      max-height: none !important;
  }
  .innerBox1{
      height: auto !important;
      max-height: none !important;
      min-height: 50px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="column-wrapper"&gt;
  
      &lt;div class="LEFTNAV-content"&gt;
          &lt;div class="box1"&gt;
              ... menu content ...
              &lt;div class="innerBox1"&gt;...some stuff...&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="Body-content"&gt;
      ... content ...
      &lt;/div&gt;
  
      &lt;div class="Other-content"&gt;
      ... content ...
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Menu Button (Image)</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
  &lt;img id="mobileMenu-icon" src="/gif-new/buttons/mobile-Menu.jpg"&gt;
  &lt;/div&gt;
  </code></pre>