expand collapse with css3

by lvo811

HTML

<h3 role="menu" aria-expanded="true">Slide</h3>

<div>
    <div class="content">lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit</div>
</div>

<h3 role="menu" aria-expanded="true">Slide</h3>

<div>
    <div class="content">lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit lorem ipsum dolr sit</div>
</div>

CSS

h3 + div {
     overflow:hidden;
     height:0;
     -webkit-transition: all 0.5s ease-in;
     transition: all 0.5s ease-in;
     padding:0;
     background:#eee;
 }
 .content {
     background:#eef;
     height:150px;
     border:3px solid gray;
     padding:0;
     margin:0;
 }

JavaScript

$("h3").click(function (ev) {
    var $t = $(this),
        content = $t.next(),
        h = 0;
    if (content.height() === 0) {

        h = content.find('.content').outerHeight();
        content.height(h);
    } else {
        content.height(0);
    }

});