JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<!---- List ---->
<ul class="ul-wrap">
    <li> <a href="#" class="filter active" data-filter="all" id="hide"><div class="list-div">
            My Portfolio
        </div></a>

        <ul class="submenu">
            <li><a href="#" class="filter" data-filter=".web" id="hide">Web</a>

            </li>
            <li><a href="#" class="filter" data-filter=".graphic" id="hide">Graphic</a>

            </li>
            <li><a href="#" class="filter" data-filter=".others" id="hide">Others</a>

            </li>
        </ul>
    </li>
    <li> <a href="#" id="show"><div class="list-div">
                About Me
            </div></a>

    </li>
</ul>
<div id="box1"> <span>About Me</span>

</div>
<div id="container"> <span>Portfolio, web graphic, others</span>

</div>

CSS

a {
    color: #525252;
    text-decoration: none;
}
.ul-wrap {
    list-style-type: none;
    text-align: right;
    margin-top: 35px;
    display: block;
    float: left;
}
.ul-wrap li {
    margin-top: 12px;
    font-size: 1.08em;
    display: block;
    float:left;
}
.list-div {
    padding-left: 14px;
    position: relative;
}
/*-----------*/
 .submenu {
    list-style-type: none;
    font-size: 0.85em;
    margin-top: 0px;
    padding: 0;
}
.submenu li {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.7);
}
.ul-wrap a:hover {
    border: none;
    color: #2bc2c4;
}
#box1 {
    top: 150px;
    background: rgba(0, 0, 0, 0.5);
    height: 300px;
    width: 300px;
    position: absolute;
    display: none;
    color: #000000;
    font-size: 1.3em;
    opacity: 0;
    z-index: -1;
}
/*----------------------*/
 #container {
    position: relative;
    box-sizing: border-box;
    float: left;
    height: 300px;
    width: 300px;
    max-width: 1600px;
    background: #544949;
    color: #000000;
    margin-top: 15px;
    margin-bottom: 20px;
}

JavaScript

$(document).ready(function () {
    var hasSlid = false;
    $('a#hide').click(function () {
        $('#box1').stop(true, true).animate({
            'top': '+=155px',
            easing: 'easeInOutCubic',
            opacity: 0
        }, 500,

        function () {
            $('#box1').hide();
        });


        $('#container').show();
        hasSlid = false;
    });


    //SHOW

    $('a#show').click(function () {
        if (!hasSlid) {
            $('#box1').show().animate({
                'top': '-=155px',
                easing: 'easeInOutCubic',
                opacity: 1
            }, 500);


            $('#container').hide();
            hasSlid = true;
        }
    })
});