Why not do this purely in CSS?
Thereby keeping your separation of concerns between content (HTML), style (CSS) and functionality (JS)
HTML
<input type='checkbox' id='showHide' />
<label for='showHide' data-showLabel='Show' data-hideLabel='Hide'></label>
<div class="panell">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, iusto, earum blanditiis voluptatibus cupiditate laudantium accusamus commodi corrupti suscipit possimus minima adipisci autem dolorem quam aperiam hic nulla. Laudantium, suscipit.</p>
</div>
CSS
input[type=checkbox] {
position:relative;
z-index:1;
left:-50px;
}
label {
position:relative;
z-index:1;
left:-50px;
}
input[type=checkbox] + label:before {
left:50px;
content:attr(data-showLabel);
position:absolute;
color:lightblue;
font-size:16px;
}
input[type=checkbox]:checked + label:before {
content:attr(data-hideLabel);
}
input[type=checkbox]:checked ~ .panell {
max-width:260px;
}
.panell {
position: fixed;
top:0;
height:100%;
z-index:0;
padding-top:20px;
max-width:0px;
transition:max-width 100ms ease-in;
overflow-x:none;
overflow-y:auto;
background:#333;
color:#fff;
-webkit-box-shadow:inset 0 0 5px 5px #222;
-moz-box-shadow:inset 0 0 5px 5px #222;
box-shadow:inset 0 0 5px 5px #222
}