JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">

<div id='container'>
    <div id='content'>
        <div class='contentItem'>content display 1</div>
        <div class='contentItem'>content display 2</div>
        <div class='contentItem'>content display 3</div>
    </div>
    <div id='door'></div>
</div>
    
<div id='links'>
    <a href='#'>content 1</a>
    <a href='#'>content 2</a>
    <a href='#'>content 3</a>
</div>

CSS

#container {
    float:left;
    width: 200px;
    height: 300px;
    clip: auto;
    overflow: hidden;
    position: relative;
}
#content {
    width: 100%;
    height: 200px;
    background: yellow;
    position: absolute;
    bottom: 0;
}
.contentItem {
    display:none;
}
.contentItem:first-child {
    display:block;
}
#door {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -200px;
    background: black;
}
#links {
    float: left;
} 
a {
    display: block;
}

JavaScript

$('a').click(function() {
    var index = $(this).index();
    $('#door').animate({top:0}, 500, function() {
        $('#content > .contentItem').hide()
            .eq(index).show();
        $(this).animate({top: -200}, 500);
    });
});