JSFiddle - React, Tailwind, and code Playground

by MsCom Technology

HTML

<div id="left">
<a href="#1">This link loads div1</a><br />
<a href="#2">This link loads div2</a><br />
<a href="#3">This link loads div3</a><br />
</div>

<div id="1" class="right">
Here is the info for div 1 which slides
</div>
<div id="2" class="right">
Here is the info for div 2 which slides
</div>
<div id="3" class="right">
Here is the info for div 3 which slides
</div>

CSS

/* ---------------------
)  Common stylesheet elements
/* --------------------- */

*, ::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
*, *:focus {
outline: none;
}
/* ---------------------
)  Common stylesheet elements
/* --------------------- */

#left {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    padding: 4px;
    border: 2px solid #000;
    background: red;
}

.right {
    width: 500px;
    height: 200px;
    position: absolute;
    top: 0;
    left: -1000px;
    padding: 0.5em;
    border: 2px solid #000;
    border-radius: 1em 0;
}

JavaScript

$('#left a').click(
    function(){
        var div = $('div').not('#left').eq($(this).index('#left a'));
        var others = $('div[data-visible="true"]');
        others.each(
            function(){
                $(this).animate({
                    'left' : '2000px'
                },1000,function(){
                    $(this).removeAttr('style data-visible');
                });
            });
        if (div.attr('data-visible')) {
            div.animate({
                'left' : '2000px'
            },1000,function(){
                $(this).removeAttr('style data-visible');
            });
        }
        else {
            div.animate({
                'left' : '210px'
            },1000).attr('data-visible',true);
        }
    });