JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<span id='action'>Open/Close</span>
<div class='left_column'></div>

CSS

.left_column{position: fixed;width: 100px;height: 100px;left: -90px;background-color: #353535;}

JavaScript

$(document).ready(function (){
    $(document).on({
        click : function(e) {
            $('.left_column').animate({left: "-90px"},300);
        }
    });
    $('#action').click(function(e){
        e.stopPropagation();
        if($('.left_column').css('left') == "0px"){
            $('.left_column').animate({left: "-90px"},300);
        }
        else{
            $('.left_column').animate({left: "0px"},300);
        }
    });
    $(document).on({
        click : function(e) {
            e.stopPropagation();
        }
    }, '.left_column');
});