title: Css transition height does not work using javascript
body: <p>So here is the problem i want to make a dropdown for my website using javascript but the transition of height doesn't work , when i click the on the div i made it doesnt transition well it works it sets the height to auto and it shows a way but the problem is it doesnt transition so its not smooth , it just pop out. please help and thank you in advance mates.</p>
  
  <p>Here are the codes:</p>
  
  <p>the HTML</p>
  
  <pre><code>&lt;h1 id="btnh" onClick="show_about('aboutcr')"&gt;about&lt;/h1&gt;
  
  &lt;div id="aboutcr"&gt;
      &lt;div id="pcontcr"&gt;
          &lt;p id="p2r"&gt;"Hey guys my name is &lt;span&gt;Vincent Nocum&lt;/span&gt; and welcome to my project     website. I'm a 17yrs old student taking up &lt;span&gt;Information Technology Course in Lyceum of The Philippines Laguna&lt;/span&gt;, The purpose of this website is for my project in &lt;span&gt;Communication Arts II&lt;/span&gt; lead by our professor &lt;span&gt;Ms.Lenie De Leon&lt;/span&gt;. I post some topic on this website held by our professor. So its concluded that this website is only for educational purposes only"&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is the css</p>
  
  <pre><code>    #aboutcr{
          display: inline-block;
          background:white;
          width: 100%;
          text-align: justify;
          overflow: hidden;
          height: 0px;
          transition: height .5s;
          -webkit-transition: height .5s;
          -moz-transition: height .5s;
          -ms-transition: height .5s;
          -o-transition: height .5s;
      }
  
      #btnh {
          width: 100%;
          margin: 0 auto;
          text-align:center;
          font-family: latolight;
          /*text-transform: capitalize;*/
          font-size: 25px;
          padding-top: 2%;
          padding-bottom: 2%;
          color: #9bcf40;
          border-bottom: 1px solid;
          border-color: #9bcf40;
          margin-top: -4px;
          background: -webkit-linear-gradient(#f4f4f4, #f1f1f1 );
          background: -moz-linear-gradient(#f4f4f4, #f1f1f1 );
          background: -ms-linear-gradient(#f4f4f4, #f1f1f1 );
          background: -o-linear-gradient(#f4f4f4, #f1f1f1 );
          background: linear-gradient(#f4f4f4, #f1f1f1 );
      }
  </code></pre>
  
  <p>And here is the javascript:</p>
  
  <pre><code>        function show_about(x){
          var about = document.getElementById(x), h = "auto";
          // or 
          // var menu = this.children[0];  
  
          if(about.style.height == h){
              about.style.height = "0px";
          }else{
              about.style.height = h;         
          }
      }
  </code></pre>