JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="&lt;script src=&quot;http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js&quot;&gt;&lt;/script&gt;"></script>
        <div id="cms-sidenav" class="cf">
            <ul class="sidenav">
                <li class="sn"><a href="#" data-panel="sn-pan-1">Lorem</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-2">Ipsum</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-3">Dolar</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-4">Sit</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-5">Amet</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-6">Et</a></li>
                <li class="sn"><a href="#" data-panel="sn-pan-7">Donut</a></li>
            </ul>
            
            <!-- hidden panel that slides out? -->
            <div id="sn-pan-1">
                <ul>
                    <li>Stuff 1</li>
                    <li>Here</li>
                </ul>
            </div>
            
            <div id="sn-pan-2">
                <ul>
                    <li>Stuff 2</li>
                    <li>Here</li>
                </ul>
            </div>
            
            <div id="sn-pan-3">
                <ul>
                    <li>Stuff 3</li>
                    <li>Here</li>
                </ul>
            </div>
            
            <div id="sn-pan-4">
                <ul>
                    <li>Stuff 4</li>
                    <li>Here</li>
                </ul>
            </div>
            
            <div id="sn-pan-5">
                <ul>
                    <li>Stuff 5</li>
                    <li>Here</li>
                </ul>
            </div>
            
            
            <div id="sn-pan-6">
                <ul>
                    <li>Stuff 6</li>
                    <li>Here</li>
                </ul>
            </div>
            
            <div id="sn-pan-7">
                <ul>
             ...

CSS

#cms-sidenav {
    width: 100px;
    height: 100%;
    background: #333;
    position: fixed;
    left: 0;
    top: 0;
}

ul.sidenav{
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.sidenav li{
    width: 100%;
    display: block;
    color: #fff;
    text-align: center;
}

#cms-sidenav a{
    color: #848484;
    text-decoration: none;
}

#cms-sidenav a:hover{
    color: #d1d1d1;
    text-decoration: none;
}

.sn a {
    width: 100%;
    display: block;
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px solid #
}

div[id*="sn-pan-"]{
    float: left;
    background: red;
    width: 100px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0;
    display: none;
}

JavaScript

$(".sn a").on('click',function(){
    var panID = $("#" + $(this).data('panel') );
    $("div[id*='sn-pan-']").hide({slide:'toggle'}, 1000);
    $(panID).css("left","100px").animate({width:'toggle'}, 500)
})