<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="glyphicon glyphicon-list"></i></a> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="glyphicon glyphicon-remove"></i></a> <li class="sidebar-brand"> <a href="#">Project name</a> </li> <li> <a href="#">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> </div> <div> <h2 class="text-center text-primary">Code for document click using switch-case toggleClass</h2> <code class="col-sm-4 col-sm-offset-4"> <script> $("#menu-close").click(function(e) { e.preventDefault(); e.stopPropagation(); $("#sidebar-wrapper").toggleClass("active"); }); $("#menu-toggle").click(function(e) { e.preventDefault(); e.stopPropagation(); $("#sidebar-wrapper").toggleClass("active",true); }); $(document).click(function()<br> { $('#sidebar-wrapper').toggleClass('active',false);<br> });<br> </script> </code> </div>

#sidebar-wrapper { margin-right: -250px; right: 0; top:0; width: 250px; background: rgb(0,0,0); position: fixed; height: 100%; overflow-y: auto; z-index: 1000; transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; -moz-transition: all 0.3s ease-in 0s; -ms-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; } .sidebar-nav { position: absolute; top: 0; width: 250px; list-style: none; margin: 0; padding: 0; } .sidebar-nav li { line-height: 50px; text-indent: 20px; } .sidebar-nav li a { color: #999999; display: block; text-decoration: none; } .sidebar-nav li a:hover { color: #fff; background: rgba(255,255,255,0.2); text-decoration: none; } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 55px; line-height: 55px; font-size: 18px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } #menu-toggle { top: 0; right: 0; position: fixed; z-index: 1; } #sidebar-wrapper.active { right: 250px; width: 250px; transition: all 0.5s ease-out 0s; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; } .toggle { margin: 5px 5px 0 0; }

$("#menu-close").click(function(e) { e.preventDefault(); e.stopPropagation(); $("#sidebar-wrapper").toggleClass("active"); }); $("#menu-toggle").click(function(e) { e.preventDefault(); e.stopPropagation(); $("#sidebar-wrapper").toggleClass("active",true); }); $(document).click(function() { $('#sidebar-wrapper').toggleClass('active',false); });