JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul id="menu">
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Ipsum</a></li>
    <li><a href="#">Dolor</a></li>
    <li><a href="#">Sit</a></li>
    <li><a href="#">Amet</a></li>
</ul>

<div id="contents">

    <div class="cont">Cont1</div>
    <div class="cont">Cont2</div>
    <div class="cont">Cont3</div>
    <div class="cont">Cont4</div>
    <div class="cont">Cont5</div>

</div>

CSS

#contents {
    overflow: hidden;
    width: 300px;
    height: 200px;
    border: 4px solid #e1e1e1;
    position: relative;
}

#contents .cont {
    display: none;
    width: 300px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 300px;
    outline: 1px dashed red;
}

#contents .cont:first-child {
    display: block;
    left: 0px;
}

JavaScript

$('#menu a').on("click", function( e ) {

    e.preventDefault();
    
    var contents = $('#contents'),
        contentsW = contents.width();

    contents.find('.cont:visible')
        .animate({ left: -contentsW }, 600, function() {
            $(this).css({ left: contentsW, display: 'none' });
        });
    
    contents.find('.cont')
        .eq( $(this).parent('li').index() )
        .show()
        .animate({ left: 0 }, 600);

});