<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="wrapper" class="active"> <header> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <ul class="nav navbar-nav navbar-right"> <li><a id="menu-toggle" href="#">Filter</a></li> </ul> </div> </nav> </header> <div id="sidebar-wrapper"> <ul id="sidebar_menu" class="sidebar-nav"> <li><a href="#">Menu<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li> <li>Link2</li> <li>Link3</li> </ul> </div> <div id="page-content-wrapper"> <div id="page-content"> <h1>Toggle Sidebar Using BootStrip</h1> <h3>Toggle right sidebar when a button or a link is clicked. It's completely hidden. </h3> </div> </div> </div>

body{ background-color: blue; } #wrapper{ background-color: white; padding-left: 70px; height: 100%; } #sidebar-wrapper { right: -140px; width: 140px; background: #222; position: fixed; height: 100%; z-index: 10000; transition: all .4s ease 0s; } #page-content-wrapper { padding-left: 0; margin-left: 0; width: 100%; height: auto; } #page-content-wrapper { width: 100%; } #wrapper.active { padding-right: 150px; } #wrapper.active #sidebar-wrapper { right:0; }

$("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("active");});