Add CSS3 transition expand/collapse

Answer 1

this should work, had to try a while too.. :D

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 + '-hide').style.display = 'inline';
      document.getElementById(shID).style.height = '100px';
    } else {
      document.getElementById(shID + '-show').style.display = 'inline';
      document.getElementById(shID + '-hide').style.display = 'none';
      document.getElementById(shID).style.height = '0px';
    }
  }
}

#example {
  background: red;
  height: 0px;
  overflow: hidden;
  transition: height 2s;
  -moz-transition: height 2s;
  /* Firefox 4 */
  -webkit-transition: height 2s;
  /* Safari and Chrome */
  -o-transition: height 2s;
  /* Opera */
}

a.showLink,
a.hideLink {
  text-decoration: none;
  background: transparent url('down.gif') no-repeat left;
}

a.hideLink {
  background: transparent url('up.gif') no-repeat left;
}

Here is some text.

  Read more
  

    

      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.
    
    

      Hide