JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<a id="sign">right-to-left</a>
<div id="userNav">Blaslasd</div>

CSS

a {
    color: #000;
    cursor:pointer;
    display:block;
}
#userNav {
    width: 200px;
    height: 200px;
    display: none;
    background: #ff0000;
}

JavaScript

$('#loginPanel').click(function () {
    if ($('#userNav').is(':hidden')) {
        $('#userNav').show('slide', {
            direction: 'left'
        }, 1000);
    } else {
        $('#userNav').hide('slide', {
            direction: 'left'
        }, 1000);
    }
});

$('#sign').click(function () {

    if ($('#userNav').is(':hidden')) {

        $('#userNav').show('slide', {
            direction: 'right'
        }, 1000);
    } else {

        $('#userNav').hide('slide', {
            direction: 'right'
        }, 1000);
    }
});


$('#loginPanel2').click(function () {

    if ($('#userNav').is(':hidden')) {

        $('#userNav').show('slide', {
            direction: 'left'
        }, 1000);
    } else {

        $('#userNav').hide('slide', {
            direction: 'right'
        }, 1000);
    }
});