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.
Awesome, thanks a ton for the coder for his time and effort!
Other than that, are there any options to add transitions like a fade or a slide effect?
Thanks in advance.
Viktor
This is just what I have been looking for.
I am trying to develop a google maps demo and want to put the marker links in a left sidebar (using jquery accordion code), with the map in the “content” on the right.
I haven’t yet been able to get the map in the “content” container. The Google Maps API v2 seems to ignore the sidebar structure.
I’ll try again tomorrow. But if you have any thoughts about whether you think I’m trying something that wont work … please let me know.
Your markup uses a div of the class “clearer” which I do not see defined in the CSS. I found that this should be a style of clear both. Although even then I still have trouble with the height of the separator element.
The
clearerclass is defined in style.css.wow, nice commenting thing with the ‘ladder’ things for drilled-in comment replies!
Thank you for the nice scripts, saved me a lot of time. However, I have trouble getting this to work on my own page in Chrome (8.0.552.237) but it works fine in Firefox… really beats me…