Add CSS3 transition expand/collapse

Question

How do I add an expand/collapse transition?

function showHide(shID) {      if (document.getElementById(shID)) {          if (document.getElementById(shID + '-show').style.display != 'none') {              document.getElementById(shID + '-show').style.display = 'none';              document.getElementById(shID).style.display = 'block';          } else {              document.getElementById(shID + '-show').style.display = 'inline';              document.getElementById(shID).style.display = 'none';          }      }  }

.more {      display: none;      padding-top: 10px;  }    a.showLink,  a.hideLink {      text-decoration: none;      -webkit-transition: 0.5s ease-out;      background: transparent url('down.gif') no-repeat left;  }    a.hideLink {      background: transparent url('up.gif') no-repeat left;  }

Here is some text.  <div class="readmore">      <a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a>      <div id="example" class="more">          <div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>          <p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide</a></p>      </div>  </div>

http://jsfiddle.net/Bq6eK/1

Answer 1

This is my solution that adjusts the height automatically:

function growDiv() {    var growDiv = document.getElementById('grow');    if (growDiv.clientHeight) {      growDiv.style.height = 0;    } else {      var wrapper = document.querySelector('.measuringWrapper');      growDiv.style.height = wrapper.clientHeight + "px";    }    document.getElementById("more-button").value = document.getElementById("more-button").value == 'Read more' ? 'Read less' : 'Read more';  }

#more-button {    border-style: none;    background: none;    font: 16px Serif;    color: blue;    margin: 0 0 10px 0;  }    #grow input:checked {    color: red;  }    #more-button:hover {    color: black;  }    #grow {    -moz-transition: height .5s;    -ms-transition: height .5s;    -o-transition: height .5s;    -webkit-transition: height .5s;    transition: height .5s;    height: 0;    overflow: hidden;  }

<input type="button" onclick="growDiv()" value="Read more" id="more-button">    <div id='grow'>    <div class='measuringWrapper'>      <div class="text">Here is some more text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna nulla. Vivamus a purus mi. In hac habitasse platea dictumst. In ac tempor quam. Vestibulum eleifend vehicula ligula, et cursus nisl gravida sit        amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div>    </div>  </div>

I used the workaround that r3bel posted: Can you use CSS3 to transition from height:0 to the variable height of content?