<body>
<div id="content" class="open">
    <div class="inner">
        <h3>Klik tombol di bawah untuk melihat efek transisi</h3>
        <p>Donec at dolor mi. Pellentesque sit amet ornare risus. Fusce varius ut turpis sed semper. In ut est et enim gravida interdum nec id quam. Aliquam leo ante, posuere id suscipit et, varius quis metus. Aenean tincidunt pellentesque facilisis.</p>
    </div>
</div>

<br />

<button class="button" id="toggle">Klik Disini</button>

</body>   
.transitions {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}

body {
    font-family:Arial;
    line-height: 3ex;
    background-color:#fff;
    font-size:16px
    color:#444;
}
#toggle {
    display:block;
    padding:10px;
    margin:10px auto;
    text-align:center;
    width:30ex;
}
#content {
    overflow:hidden;
    margin:10px;
    border:1px solid #bbb;
    background:#f0f0f0;
    opacity:1;
}
#content .inner {
    padding:10px;
    overflow:auto;
}
#content .inner h3{
    text-align:center;
}
.button{
    padding:10px 20px;
    margin:5px;
    color:#fff;
    text-align:center;
    border:0;
    cursor:pointer;
    border-radius:3px;
    display:block;
    text-decoration:none;
    font-weight:400;
    box-shadow:inset 0 -2px rgba(0,0,0,0.15);
    background:#e74c3c;
    transition:all 0.3s ease-in-out;
}
.button:hover{
    box-shadow:inset 0 -54px rgba(0,0,0,0.15);
    color:#fff;
}
.button:active{
    border:none;
    outline:none;
    box-shadow:none;
}
var content = $('#content');
content.inner = $('#content .inner');
content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
    if(content.hasClass('open')){
        content.css('max-height', 9999);
    }
});

$('#toggle').on('click', function(e){
    content.toggleClass('open closed');
    content.contentHeight = content.outerHeight();
    
    if(content.hasClass('closed')){
        content.removeClass('transitions').css('max-height', content.contentHeight);
        setTimeout(function(){           
            content.addClass('transitions').css({
                'max-height': 0,
                'opacity': 0
            });
            
        }, 10);
        
    }else if(content.hasClass('open')){  
        
        content.contentHeight += content.inner.outerHeight();
        content.css({
            'max-height': content.contentHeight,
            'opacity': 1
        });
        
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js