anar1811,
в клике должно быть условие а не наоборот
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<style>
body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}
.sidebar{background:#333;position:absolute;top:0;bottom:0;left:-30%;height:auto;width:30%;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out}
.sbopen{left:0}
.sbclose{left:-30%}
.sbopen+.main{margin-left:30%}
.sidebar-span{width:500px}
.header{height:50px;background:#008000}
.main{-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out}
.content{}
.button-area-show,.button-area-close{left:0;top:0px;background:#ccc;height:50px;width:50px}
</style></head><body>
<div class="sidebar sbclose">
<span class="sidebar-span">sadadsdasdasdasdasdasdasdasd</span>
</div>
<div class="main">
<div class="header">
<a class="sbbtn opener" href="#">Открыть</a>
</div>
<div class="content">
dsfsdfasdfdfadsfadsfasdfsdf
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$('.sbbtn').click(function () {
$(this).toggleClass('opener closer');
$('.sidebar').toggleClass('sbopen sbclose');
});
</script>
</body></html>