title: Why this CSS3 transition on height does not work
body: <p>I have been working in an accordion, but for some odd reason the following code:</p>
  
  <pre><code>&lt;style&gt;
      .collapse {
      position: relative;
      height: 0;
      overflow: hidden;
      -webkit-transition: height .35s ease;
      -moz-transition: height .35s ease;
      -o-transition: height .35s ease;
      transition: height .35s ease;
      }
      .collapse.in {
      height: auto;
      }
  &lt;/style&gt;
  
  &lt;div class="accordion"&gt;
      &lt;div class="something"&gt;
          &lt;a class="" &gt;Accordion Pane 1&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="accordion-body collapse"&gt;
          &lt;div class="accordion-inner"&gt; content &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
  $('.something').click(function(event){
      event.preventDefault();
      $(this).next('.accordion-body').toggleClass('in');
  
  })
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/CvdXK/">http://jsfiddle.net/CvdXK/</a></p>
  
  <p>doesn't seem to work. The height doesn't animate. And i dont know why.</p>
  
  <p>Thanks very much in advance.</p>