JSFiddle - React, Tailwind, and code Playground

by Ismail Ibraheem Shurrab

HTML

<script src="http://www.shopdev.co.uk/blog/jquery.cookie.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<a id="loginPanel">quote</a>
<div id="userNav">User Area</div>

CSS

#loginPanel {
    color: #000;
    cursor:pointer;
}

#userNav {
    width: 200px;
    height: 200px;
    display: none;
    background: #ff0000;
}

JavaScript

// Open / Close Panel According to Cookie //
function toggleDiv() {
if ($.cookie('panel') == 'open'){    
    $('#userNav').hide('slide',{direction:'left'},1000);
} else {
    $('#userNav').show('slide',{direction:'left'},1000);
}
}

// Toggle Panel and Set Cookie //
$('#loginPanel').click(function(){
    if ($('#userNav').is(':hidden')) {
        $.cookie('panel', 'closed');
    } else {
         $.cookie('panel', 'open');
    }
    toggleDiv();
});