Playing with CSS Transitions

HTML

<div>Content before slider</div>
<div class="container">
    <div class="one">Hover me to reveal new div.</div>
    <div class="two">
        <div>
        I slid!<br>And I am higher than the div before me...<br/>Click me to close.
        </div>
    </div>
</div>
<div>Content after slider</div>

CSS

.container {
    overflow:hidden;
 }

.one {
    background-color: lightblue;
    z-index: 1;
}

.two {
    background-color: yellow;
    z-index: -1;
    max-height: 0;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

JavaScript

$('.container').hover(function() {
    var contentHeight = $('.two').children('div').outerHeight();
    $('.two').css('max-height', contentHeight + 'px')
}, function() {
    // nothing here
});

$('.two').click(function() {
    $('.two').css('max-height', '0');
});