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.
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.