Bootstrap Collapsible Sidebars

Using the Bootstrap grid system, some CSS and a little jQuery to create collapsible sidebars.

#content .col-md-6 .col-md-9 .col-md-12

Changes between .col-md-6, .col-md-9 and .col-md-12 as sidebars are toggled, making use of the available space.

#row-main {
  /* necessary to hide collapsed sidebars */
  overflow-x: hidden;
}

#content {
  /* for the animation */
  transition: width 0.3s ease;
}

When toggling a sidebar switches the class .collapsed on the sidebar container and finds the number of open sidebars to determine the appropriate class to apply to the #content container.