javascript - How to put my slide menu back to left and hide it in the beginning? -

$(document).ready(function(){        $('.toggle-summary').click(function(){          $('.book-summary').animate({left:"0px"});          $('.book-body').css('left', '250px');        });          });

readbook .col-sm-10 {    border: 1px solid #888888;    height:100%;  }    #arrow-back {    padding-top:7px;  }    .book-summary {    border: 1px solid #888888;    position: absolute;    left:-250px;    top:0;    width:250px;    background-color: #f8f8f8;    z-index: 1;  }    .book-body {    border: 1px solid #888888;    position: absolute;    left:0;    top:0;    right:0;  }    .toggle-summary {    display:block;    color:#888888;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>  <div class="container readbook">    <div class="row">      <div class="col-sm-10 col-sm-offset-1">        <div class="book-summary">slide menu</div>        <div class="book-body">          <div class="body-inner">            <div class="book-header">              <a href="#" class="toggle-summary"><i class="fa fa-align-justify fa-lg"></i></a>            </div>            <div class="page-wrapper">              content body.content body.content body.content body.content body.content body.content body.content body.content body.content body.content body.            </div>          </div>        </div>      </div>    </div>  </div>

i write code slide menu left right , content shift right little.

my question , how put slide menu when click toggle button again , when view on full page , can see slide menu.how hide menu in beginning , show out when click toggle button , hide again when slide back?

i use class , toggle instead of controlling style though jquery. can see working example in fiddle.

here css , jquery you.

css:

readbook .col-sm-10 {   border: 1px solid #888888;   height:100%; }  #arrow-back {   padding-top:7px; }  .book-summary {   border: 1px solid #888888;   position: absolute;   left:-250px;   top:0;   width:250px;   background-color: #f8f8f8;   z-index: 1;   transition: .3s; }  .book-summary.active{   left: -0px; }  .book-body {   border: 1px solid #888888;   position: absolute;   left:0;   top:0;   right:0;   transition: .3s; }  .book-body.active{   left: 250px;   }   .toggle-summary {   display:block;   color:#888888; } 

jquery:

$(document).ready(function(){    $('.toggle-summary').click(function(){       $('.book-summary').toggleclass('active');       $('.book-body').toggleclass('active');    }); }); 

edit 1: typos