Bootstrap Left & Right Collapsible Sidebar With jQuery

Here I am going to share simple bootstrap and jQuery method to create simple Left, Right and Both Collapsible Sidebar which help you to create full screen view, you can easily hide and show left and right sidebar using the Bootstrap grid system, some CSS and a little jQuery to create a collapsible sidebar.


Libraries

ADD required bootstrap and jQuery library on page.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap Collapsible Left Sidebar

Has a negative left margin when collapsed.

#sidebar {
  /* for the animation */
  transition: margin 0.3s ease;
}
 
.collapsed {
  /* hide it for small displays*/
  display: none;
}
 
@media (min-width: 992px) {
  .collapsed {
    display: block;
    /* same width as sidebar */
    margin-left: -25%;
  }
}




Changes from .col-md-9 to .col-md-12 when the sidebar is collapsed, occupying the remaining space.

#row-main {
  /* necessary to hide collapsed sidebar */
  overflow-x: hidden;
}
 
#content {
  /* for the animation */
  transition: width 0.3s ease;
}

To toggle the sidebar, just switch the CSS classes.

<script>
		$(document).ready(function () {
			$(".toggle-sidebar").click(function () {
				$("#sidebar").toggleClass("collapsed");
				$("#content").toggleClass("col-md-12 col-md-9");
 
				return false;
			});
		});
	</script>

See live demo and download source code.

DEMO-1 | DEMO-2 | DEMO-3 | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.