JS Slide toogle sidebars out and expand content div

Question

I want to slide out my both sidebars and expand the width of my middle content div but at the same time and on a again click I want to toogle it back to original.

What I tried so far

$('.headbar').click(function () {
    $(".leftside").animate({width: 'toggle'});
    $( ".rightside" ).animate({
        width: "toggle"
    }, 300, function() {
        $(".content").animate({width: '1200px'});
    });
});

My Problems

• headbar is flashing when animation start (but guess its CSS bug)

• content is not toggle back to original

My Concept for understanding

Answer 1

I would approach this using a CSS class transition effect toggled by jQuery instead of using jQuery animate function.

Working Demo:

$(document).ready(function() {

  $('body').on('click', '.headbar', function(){
  	$('body').toggleClass('expanded');
  });
  
});

.headbar {
  width: 100%;
  background: #303030;
  background-repeat: repeat;
  background-size: 38px 133px;
  height: 40px;
  background-position: 0px 39px;
  box-shadow: 0px 1px 5px;
  position: fixed;
  z-index: 1000;
  margin-top: -40px;
}

.leftside {
  position: fixed;
  left: 2%;
  top: 100px;
  height: 500px;
  width: 13%;
  background-color: rgba(123, 123, 123, 0.95);
}

.rightside {
  position: fixed;
  right: 2%;
  top: 100px;
  height: 500px;
  width: 13%;
  background-color: rgba(123, 123, 123, 0.95);
}

.scrollable {
  position: relative;
  top: 20px;
  min-height: 700px;
  width: 70%;
  margin: 0 auto;
  box-shadow: 0px 1px 5px;
  background: white;
}

/* ===================== */
/* expanded transition
/* ===================== */

.leftside, .rightside, .scrollable {
  transition:0.3s;
}

body.expanded .scrollable {
  width:100%;
}

body.expanded .leftside {
  left: -100%;
}

body.expanded .rightside {
  right: -100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="headbar"></div>
<div class="leftside"></div>
<div class="rightside"></div>
<div class="scrollable"></div>

jsFiddle