DevHeart Web Development jQuery: Collapsible sidebar layout

jQuery: Collapsible sidebar layout

jQuery: Collapsible sidebar layout

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">&nbsp;</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">&nbsp;</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!

 
 
 

Comments: 10

Feel free to share your thoughts on this article.

  • golpesar

    Thanks. its useful

     
     
     
  • darkkiller

    Thanks for tut, can you help me “how to set sidebar open is default load”?

     
     
     
  • nbari

    Excellent tutorial

     
     
     
  • Gareth

    Excellent tutorial, I’ve been struggling with this for ages, thank you :D.

     
     
     
  • Dan A.

    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.

       
  • brandon

    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 clearer class is defined in style.css.

       
    • wow, nice commenting thing with the ‘ladder’ things for drilled-in comment replies!

       
  • Jason

    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…

     
     
     
  • Leave a Reply
     
    Your Name
     
     
     
     
     
 
© 2014 DevHeart and the authors.
Powered by WordPress | Created by Arcsin