Slide Out Box

<div id="jak_boxchanger">
 
 <div id="jak_boxcontent">
 
 <h3>jQuery</h3>
 <p>Slide out box based on jQuery</p>
 <p>Lorem ipsum dolor sit amet, odio cetero deseruisse qui ex, ad eum nostro verear eripuit. Ea est aliquip voluptatum, vis at primis impedit. No has tritani disputando. At virtute hendrerit liberavisse qui, epicurei petentium molestiae per cu, eius vocibus omittam vix ut. Has at euripidis comprehensam. Verear neglegentur theophrastus sea ex.</p>
 
 </div>
 
 <div id="jak_boxbutton">
 <img src="jquery.png" alt="leaf" width="25" height="25" />
 </div>
 
 </div>

jQuery

<div id="jak_boxchanger">
 
 <div id="jak_boxcontent">
 
 <h3>Vanilla Javascript</h3>
 <p>Slide out box based on Javascript</p>
 <p>Lorem ipsum dolor sit amet, odio cetero deseruisse qui ex, ad eum nostro verear eripuit. Ea est aliquip voluptatum, vis at primis impedit. No has tritani disputando. At virtute hendrerit liberavisse qui, epicurei petentium molestiae per cu, eius vocibus omittam vix ut. Has at euripidis comprehensam. Verear neglegentur theophrastus sea ex.</p>
 
 </div>
 
 <div id="jak_boxbutton">
 <img src="jquery.png" alt="leaf" width="25" height="25" />
 </div>
 
 </div>

Vanilla Javascript

#jak_boxchanger {
 position: fixed; 
 top: 145px;
 left: -305px;
 z-index: 9998;
}

#jak_boxbutton { 
 float: left;
 text-align: center;
 cursor: pointer;
 padding: 10px;
 background-color: #ffffff;
 -webkit-border-radius: 0 5px 5px 0;
 border-radius: 0 5px 5px 0;
 width: 30px;
 height: 25px;
}

#jak_boxcontent {
 float: left;
 background-color: #ffffff;
 width: 280px;
 height: 450px;
 padding: 10px;
 -webkit-border-radius: 0 0 5px 0;
 border-radius: 0 0 5px 0;
 overflow: auto;
 -webkit-box-shadow: 2px 2px 10px 1px #333333;
 box-shadow: 2px 2px 10px 1px #333333;
}

jQuery

#jak_boxchanger {
 position: fixed; 
 top: 145px;
 right: -305px;
 z-index: 9998;
 -webkit-transition-duration: 0.3s;
 -moz-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -o-transition-duration: 0.3s;
}

#jak_boxbutton { 
 float: right;
 text-align: center;
 cursor: pointer;
 padding: 10px;
 background-color: #ffffff;
 -webkit-border-radius: 5px 0 0 5px;
 border-radius: 5px 0 0 5px;
 width: 30px;
 height: 28px;
}

#jak_boxcontent {
 float: right;
 background-color: #ffffff;
 width: 280px;
 height: 450px;
 padding: 10px;
 -webkit-border-radius: 0 0 0 5px;
 border-radius: 0 0 0 5px;
 overflow: auto;
 -webkit-box-shadow: -2px 2px 10px 1px #333333;
 box-shadow: -2px 2px 10px 1px #333333;
}

.moveboxchanger {
 right: 0 !important;
}

Vanilla Javascript

<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
$(document).ready(function(){
 
 $('#jak_boxbutton').on('click',function(e) {
 e.preventDefault();
 if ($('#jak_boxchanger').css('left') == '0px') {
 $('#jak_boxchanger').animate({left: '-305px'}, 300);
 } else {
 $('#jak_boxchanger').animate({left:0}, 300);
 }
 });

});

jQuery

var boxclosed = true;
var el = document.getElementById("jak_boxbutton1");
var el1 = document.getElementById("jak_boxchanger1");
el.addEventListener("click", function() {

 if (boxclosed) {
 // add class
 if (el1.classList) {
 el1.classList.add("moveboxchanger");
 } else {
 el1.className += ' ' + "moveboxchanger";
 }
 boxclosed = false;
 } else {
 // remove class
 if (el1.classList) {
 el1.classList.remove("moveboxchanger");
 } else {
 el1.className = el.className.replace(new RegExp('(^|\b)' + className.split(' ').join('|') + '(\b|$)', 'gi'), ' ');
 }
 boxclosed = true;
 }

});

Vanilla Javascript