JSFiddle - React, Tailwind, and code Playground

by tuanderful

HTML

<!-- update this class to show-left or hide-left -->
<div class="show-left">
    <div id="columnleft">stuff in here</div>
    <div id="columncenter">bigger stuff in here
        <br /><button>Toggle Sidebar</button></div>
</div>

CSS

#columnleft {
  float:left; 
  position:relative;
  text-align:left;
  width:155px;
    
  background: blue;
}

#columncenter {  
  position:relative; 
  padding-bottom:50px;
        
  background: red;
}


.show-left #columnleft {
    display: block;
}

.show-left #columncenter {
    margin-left: 162px; 
}

.hide-left #columnleft {
    display: none;
}

.hide-left #columncenter {
    margin-left: 0; 
}

JavaScript

$("button").toggle( function(){
    $(".show-left").attr("class","hide-left");
}, function(){
    $(".hide-left").attr("class","show-left");
});