Horizontal sidebar toggle in Bootstrap

HTML

<div class="container">
  <!-- This button is used to show/hide the sidebar -->
  <button type="button" class="sidebar-toggle pull-left visible-xs">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  </button>
  <!-- Layout -->
  <div class="row content">
    <div class="sidebar col-xs-12 col-sm-3 col-md-3 col-lg-3">Here the sidebar</div>
    <div class="main col-xs-12 col-sm-9 col-md-9 col-lg-9">Here the main content</div>
  </div>
</div>

LESS

// For XS devices
@media (max-width: @screen-xs-max) { 
  
  // Sidebar with horizontal toggle
  // 1) Hide the sidebar, placing it out of browser window
  // 2) Clicking .sidebar-toggle button the JS apply the .open-sidebar class which shows the sidebar
  .container{
    @offset: 300px;
    overflow: hidden;

    .content{
      position: relative;
      left: 0px;
      transition: all 0.25s ease-out;
      
      // Move the sidebar inside the window
      &.open-sidebar{
        left: @offset;
      }
      
      // Move the sidebar off the window
      .sidebar{
        position: absolute;
        top: 0;
        left: -@offset;
      }
    }
    
  } // end Sidebar horizontal toggle

}

Javascript

// Applica la classe active che mostra la sidebar
$(document.body).on('click', 'button.sidebar-toggle', function() {
  $(".content").toggleClass('open-sidebar');
});