Run LESS in JSFiddle

HTML

<div class="nav">
    Sidebar: 
      <a class="sidebar-toggle">Toggle</a>
    | <a class="sidebar-slide">Slide</a>
</div>
<br />
<div class="items">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

CSS

.nav {
}
.nav a {
    cursor: pointer;
    color: navy;
    font-weight: bold;
}
.items {
    position: absolute;
    width: 100px;
    border: 1px solid black;
}

.items.hidden {
    display: none;
}

JavaScript

$('.sidebar-toggle').click(function() {
    var sidebar = $('.items');
    sidebar.css('margin-left', 0);
    if (!sidebar.hasClass('hidden'))
  		sidebar.addClass('hidden'); 
    else
        sidebar.removeClass('hidden');
});

$('.sidebar-slide').click(function() {
    var sidebar = $('.items');
    var hidden = sidebar.hasClass('hidden');
    if (hidden) {
        sidebar.css('margin-left', -sidebar.width()*2);
        sidebar.removeClass('hidden');
	    sidebar.animate({'margin-left': 0});
    } else  {
        sidebar.css('margin-left', 0);
        sidebar.removeClass('hidden');
	    sidebar.animate({'margin-left': -sidebar.width()*2}, function() {
        	sidebar.addClass('hidden');
        });
    }
    
});