JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class="LeftColumn"></div>
<a href="#" class="SidebarToggle">Show Sidebar</a>

CSS

.LeftColumn { float: left; height: 400px; width: 200px; background: #ddd; }
.active { background: red; }

JavaScript

$(".LeftColumn").hide().click(function(e) { e.stopPropagation(); }); 
$(".SidebarToggle").click(function () {
    if($(this).hasClass("active")) {
      $(this).removeClass("active")
             .text("Show Sidebar")
             .attr("title", "Show Sidebar");
      $(".LeftColumn").fadeOut("fast");      
    } else {
      $(this).addClass("active")
             .text("Hide Sidebar")
             .attr("title", "Hide Sidebar");
      $(".LeftColumn").fadeIn("fast");
    }
    return false;
});
$(document).click(function () {
  $('.LeftColumn').fadeOut('fast');
  $('.SidebarToggle').removeClass("active")
                     .text("Show Sidebar");
});