Learn how to create a collapsible sidebar layout, saving preference using cookies.
View the final example Download all examples
Requirements
My approach includes using jQuery along with the jQuery Cookie plugin for remembering whether the sidebar should be collapsed or not.
These files are used in examples related to this article.
Note: Don’t forget that JavaScript and cookies has to be enabled!
1. Markup and style setup
The following XHTML and CSS allows us to combine the classes use-sidebar and sidebar-at-right/sidebar-at-left on the main div to display the sidebar on the left side, right side or not at all.
XHTML (sidebar at right)
<div class="use-sidebar sidebar-at-right" id="main">
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<div class="clearer"> </div>
</div>
CSS
#content,#sidebar {
line-height: 300px;
text-align: center;
border: 1px solid;
}
#sidebar {
background-color: #DEF;
border-color: #BCD;
display: none;
}
#content {
background-color: #EFE;
border-color: #CDC;
}
.use-sidebar #content {width: 65%;}
.use-sidebar #sidebar {
display: block;
width: 32%;
}
.use-sidebar.sidebar-at-left #content, .use-sidebar.sidebar-at-right #sidebar {float: right;}
.use-sidebar.sidebar-at-right #content, .use-sidebar.sidebar-at-left #sidebar {float: left;}
Check out the examples for a demonstration of the three combinations (no sidebar, right/left).
View Examples
2. Show, hide and toggle sidebar
Using our simple setup, all we have to do to hide, show or toggle the sidebar is to add, remove or toggle the use-sidebar class on the main div, which is a very simple task using jQuery:
$('#main').addClass('use-sidebar'); // Show
$('#main').removeClass('use-sidebar'); // Hide
$('#main').toggleClass('use-sidebar'); // Toggle
We can use the jQuery click event to bind buttons to these actions:
// Show sidebar
$('#button-show').click(function(){
$('#main').addClass('use-sidebar');
});
// Hide sidebar
$('#button-hide').click(function(){
$('#main').removeClass('use-sidebar');
});
// Toggle sidebar
$('#button-toggle').click(function(){
$('#main').toggleClass('use-sidebar');
});
View Examples
3. Remember preference using cookies
An easy way of doing this (given you use the same markup as in this article) is setting the value of a cookie to “use-sidebar” or “” (empty string) and then add this value to the class attribute on the main div when the page is loaded. I named the cookie sidebar-pref and I’m passing a third parameter to the cookie function defining for how long in days the cookie is valid.
// Save preference
$.cookie('sidebar-pref', 'use-sidebar', { expires: 30 }); // Shown
$.cookie('sidebar-pref', null, { expires: 30 }); // Hidden
// Load preference
$('#main').addClass($.cookie('use-sidebar'));
// Reset preference
$.cookie('sidebar-pref', null);
Putting it together
To have the preference saved whenever we show, hide or toggle the sidebar, we can to put these snippets of code into functions and then bind buttons to them:
$(document).ready(function(){
// Show sidebar
function showSidebar(){
$('#main').addClass('use-sidebar');
$.cookie('sidebar-pref', 'use-sidebar', { expires: 30 });
}
$('#button-show').click(function(){
showSidebar();
});
// Hide sidebar
function hideSidebar(){
$('#main').removeClass('use-sidebar');
$.cookie('sidebar-pref', null, { expires: 30 });
}
$('#button-hide').click(function(){
hideSidebar();
});
// Toggle sidebar
$('#button-toggle').click(function(){
if ( $('#main').hasClass('use-sidebar') ){
hideSidebar();
}
else {
showSidebar();
}
});
// Reset preference
$('#button-reset').click(function(){
$.cookie('sidebar-pref', null);
});
// Load preference
$('#main').addClass($.cookie('sidebar-pref'));
});
View Example
4. Adding style and usability
The examples so far are using buttons to toggle the sidebar, this isn’t exactly pretty and doesn’t feel natural in a real website. Instead of using a button we are going to add a clickable sidebar separator.
XHTML
Added the separator.
<div class="use-sidebar sidebar-at-right" id="main">
<div id="content">Content</div>
<div id="sidebar">Sidebar</div>
<a href="#" id="separator"></a>
<div class="clearer"> </div>
</div>
CSS
Added width for the content div, and styles for the separator.
#content,#sidebar {
line-height: 300px;
text-align: center;
border: 1px solid;
}
#sidebar {
background-color: #DEF;
border-color: #BCD;
display: none;
}
#content {
background-color: #EFE;
border-color: #CDC;
width: 97%;
}
.use-sidebar #content {width: 64%;}
.use-sidebar #sidebar {
display: block;
width: 32%;
}
.sidebar-at-left #sidebar {margin-right: 1%;}
.sidebar-at-right #sidebar {margin-left: 1%;}
.sidebar-at-left #content, .use-sidebar.sidebar-at-right #sidebar, .sidebar-at-right #separator {float: right;}
.sidebar-at-right #content, .use-sidebar.sidebar-at-left #sidebar, .sidebar-at-left #separator {float: left;}
#separator {
background-color: #EEE;
border: 1px solid #CCC;
display: block;
outline: none;
width: 1%;
}
.use-sidebar #separator {
background: url('img/vertical-separator.gif') repeat-y center top;
border-color: #FFF;
}
#separator:hover {
border-color: #ABC;
background: #DEF;
}
JavaScript
Changed cookie name to “sidebar-pref2″ so the example cookies won’t get mixed up, bound the click event of the separator to toggle the sidebar and set it’s height to match its parent container.
$(document).ready(function(){
// Variables
var objMain = $('#main');
// Show sidebar
function showSidebar(){
objMain.addClass('use-sidebar');
$.cookie('sidebar-pref2', 'use-sidebar', { expires: 30 });
}
// Hide sidebar
function hideSidebar(){
objMain.removeClass('use-sidebar');
$.cookie('sidebar-pref2', null, { expires: 30 });
}
// Sidebar separator
var objSeparator = $('#separator');
objSeparator.click(function(e){
e.preventDefault();
if ( objMain.hasClass('use-sidebar') ){
hideSidebar();
}
else {
showSidebar();
}
}).css('height', objSeparator.parent().outerHeight() + 'px');
// Load preference
if ( $.cookie('sidebar-pref2') == null ){
objMain.removeClass('use-sidebar');
}
});
View Example
That’s it – Good luck and have fun with collapsible sidebar layouts!
Published by Viktor Persson at April 14th, 2010.
Thanks. its useful
Thanks for tut, can you help me “how to set sidebar open is default load”?
Excellent tutorial
Excellent tutorial, I’ve been struggling with this for ages, thank you :D.