jQuery 의 .toggleClass()를 사용하면 간단합니다.

css를 잘 다루신다면,

transition: right 0.5s ease;

와 같이 간단한 애니메이션도 쉽게 처리 할 수 있습니다.

HTML

<div class="l-container">

  <div class="l-contents">
    <p>I'm Contents</p>
  </div>

  <div class="l-sidebar is-close">

    <div class="sidebar-in">

      <p>I'm Sidebar</p>
      <button type="button" class="btn-toggle">OPEN</button>

    </div>

  </div>

</div>

CSS

.l-container {
  position: relative;
}
.l-container .l-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  width: 200px;
  height: 100%;
  border-left: 1px solid #ccc;
  transition: right 0.5s ease;
}
.l-container .l-sidebar.is-close {
  right: -200px;
  transition: right 0.5s ease;
}
.l-container .l-sidebar .sidebar-in {
  position: relative;
  width: 180px;
  margin: 0 auto;
}
.l-container .l-sidebar .sidebar-in .btn-toggle {
  position: absolute;
  left: -60px;
  top: 10px;
  width: 50px;
  background: #000;
  color: #fff;
  display: inline-block;
  padding: 10px 0;
}

JS

;(function($){

  var $btnToggle  = $('.btn-toggle'),
      $sideBar = $('.l-sidebar');

  $btnToggle.on('click', function(e){

    var _this = $(this);

    $sideBar.toggleClass('is-close');

    if($sideBar.hasClass('is-close')) {
      _this.text('open');
    } else {
      _this.text('close');
    }    

  });

})(jQuery);

음? 코드펜 embed 가 안되네요.

코드펜 예제 미리보기