bootstrap sidebar toggle

by abenrob

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
    
  <div class="navbar-inner">
    <div class="container-fluid">

      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
        
      <div class="nav-collapse">
        <ul class="nav">

          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->

    </div>
  </div>
</div>
<a href="#" class="toggles" rel="tooltip" title="sidebar toggle"><i class="icon-chevron-left"></i></a>
<div class="container-fluid">
    
  <div class="row-fluid">
      
    <div id="sidebar" class="span3">
        
      <div class="well sidebar-nav">
        <ul class="nav nav-list">

          <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="nav-header">Sidebar</li>

          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>

          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->
    </div><!--/span-->

    <div id="content" class="span9">
      <div class="hero-unit">
        <h1>Hello,...

CSS

body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.sidebar-nav {
    padding: 9px 0;
}

a.toggles {
    position:absolute;
    display:blue;
    background-color:white;
    color:blue;
    padding:11px 3px;
}

JavaScript

$('a.toggles').click(function() {
    $('a.toggles i').toggleClass('icon-chevron-left icon-chevron-right');

    $('#sidebar').animate({
        width: 'toggle'
    }, 100);
    $('#content').toggleClass('span12 span9');
});

$('#content').toggle(

function() {
    $(this).css({
        'margin-left': '0'
    });
}, function() {
    $(this).css({
        'margin-left': '2.127659574%'
    });
});
$(document).ready(function () {
    $("a").tooltip({
        'selector': '',
        'placement': 'bottom'
    });
});