JSFiddle - React, Tailwind, and code Playground

by ciaoben

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class='container '>
    <div class="row"  >
    <div class='col-xs-3 bb' >
        <div class='sidebar '>
            <div class='uno'></div>
            <div class='due'></div>
        </div>   
    </div>    
     <div class='col-xs-9  aa' >
        <div class='table active '>
        </div>   
    </div> 
    </div>
    <button>azione</button>
</div>

CSS

.sidebar {
    height:300px;
    
    background-color:blue;
    
}

.table {
    height:300px;
    float:left;
    background-color:green;
}

button {
    position:absolute;
    bottom:50px;
    right:50px;
    
}

.col-xs-1 {
    width: 0px;
}
.uno{
    width:100%;
    height:50px;
    float:left;
    background-color:yellow;
}
.due {
     width:100%;
    height:50px;
    float:left;
    background-color:orange;
    
}

.row div {
    -webkit-transition: width 0.3s ease, margin 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease;
}

JavaScript

$('button').click(function () {          
        $( ".due" ).animate({
            opacity: 1,
            height: 0
        }, 300, function() {
            $( ".uno" ).animate({
                opacity: 1,
                height: 0
             }, 300,function() {
                 
                 setTimeout("$('.bb').toggleClass('col-xs-1 col-xs-3')",200);
                  setTimeout("$('.aa').toggleClass('col-xs-10 col-xs-9')",200);
         
           
            });
   
        });
        
    });