Code example for an easy toggle sidebar

side-toggle.md

styles:

  #slideout {
    width: 300px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background: white;
    /*margin-left: -301px;*/
    margin-left: 0px;
    z-index: 1000;
  }

  #opener {
    z-index: 1000;
    float: right;
    margin: 215px -40px 0px 0px;
    border-radius: 0;
  }

javascripts:

  
  $('#opener').on('click', function() {
    var panel = $('#slideout');
    if (panel.hasClass("visible")) {
      panel.removeClass('visible').animate({'margin-left': '-300px'});
    } else {
      panel.addClass('visible').animate({'margin-left': '0px'});
    }
    return false;
  });

<div id="slideout">
  <a href="#" class="btn btn-danger" id="opener"><i class="fa fa-search"></i></a>
</div>