RSS Feed
Feb
12

Cookies With jQuery - Designing Collapsible Layouts

XHTML & CSS, jQuery



The ability to set and read cookies is a very useful feature of many programming languages. Fortunately, JavaScript has this functionality. Klaus Hartl released a cookie plugin last year for jQuery. What I particularly like about this plugin is the simple syntax - synonymous with jQuery. Traditionally, one would create a cookie and set the value of a cookie using standard JavaScript as follows:

document.cookie = 'name=value; expires=Thu, 2 Aug 2008 20:00:00 UTC; path=/'

You can read more about using standard JavaScript to set and read cookies over at Quirksmode. We can use jQuery with Klaus Hartl’s cookie plugin to streamline the process of creating and reading cookies. Furthermore, the plugin simplifies the syntax used.

Before we get started on designing a collapsible layout, I’m going to introduce the syntax for Klaus Hartl’s Cookie plugin:

// Get the value of a cookie:
$.cookie('sampleCookie');
 
// Create (or update) the value of a cookie:
$.cookie('sampleCookie', 'cookieValue');
 
//Create (or update) the value of a cookie to expire in 2 days:
$.cookie('sampleCookie', 'cookieValue', { expires: 2 });
 
// Delete a cookie:
$.cookie('sampleCookie', null);

Please note that in the examples above, ’sampleCookie’ is the name of a cookie and ‘cookieValue’ is the value assigned to that cookie.

Collapsible Layout

I’m going to demonstrate how to use cookies with jQuery by designing a simple collapsible layout. The page layout will comprise of 2 columns. 2-column structures are common amongst many websites. The left column typically contains site navigation whilst the right column houses the page content. Allowing users to colapse entire columns is probably not beneficial in most cases. It would be more beneficial to allow users to collapse and subsequently expand (often referred to as toggling) individual sections within columns (e.g. navigation sections, news sections etc.). However, to keep this article short and simple, we’ll work with entire columns.

Firstly, we’ll need a 2-column page layout to work with. We’ll allow users to collapse and expand both the left and right columns. In order to add this functionality, we will be utilizing jQuery’s CSS manipulation features:

// LEFT COLUMN:
    // When the collapse button is clicked:
    $('.collapseLeft').click(function() {
        $('.collapseLeft').css("display","none");
        $('.expandLeft').css("display","block");
        $('#leftCol').css("height","20px");
    });
    // When the expand button is clicked:
    $('.expandLeft').click(function() {
        $('.expandLeft').css("display","none");
        $('.collapseLeft').css("display","block");
        $('#leftCol').css("height","500px");
    });
// RIGHT COLUMN:
    // When the collapse button is clicked:
    $('.collapseRight').click(function() {
        $('.collapseRight').css("display","none");
        $('.expandRight').css("display","block");
        $('#rightCol').css("height","20px");
    });
    // When the expand button is clicked:
    $('.expandRight').click(function() {
        $('.expandRight').css("display","none");
        $('.collapseRight').css("display","block");
        $('#rightCol').css("height","500px");
    });
});

This is really some very simple code. Let’s take a detailed look. We’ll deal with the left column first. In the left column, there will be 2 possible buttons. One button will expand the column. The other button will collapse the column. However, if the left column is already expanded, there is no need to display the expand button. The same principal can be applied to the collapse button.

I have assigned a collapse button for the left column the class: ‘ collapseLeft’. When this button is clicked, we want 3 actions to occur. Firstly, we want to hide the collapse button. We can do this by manipulating the CSS as follows:

$('.collapseLeft').css("display","none");

We now want to give the user the option to expand the column. We do this by displaying the expand button. I have given the expand button for the left column the class: ‘expandLeft’. Initially, we want to hide the expand button. This can be done using plain CSS (i.e. display: none;). To now display this button, we need to manipulate the CSS:

$('.expandLeft').css("display","block");

Finally, we want to collapse the left column. Since I have positioned the buttons (using CSS) ‘absolutely’ at the top of left column, I don’t want to completely hide the left column. Instead, I’ll manipulate the CSS, changing the height of the left column to leave just enough room to display the expand button:

$('#rightCol').css("height","20px");

You should now be able to follow through the next 3 blocks of code and understand what each line does. You can see that for the right column expand and collapse buttons, I have used the classes: ‘collapseRight’ and ‘expandRight’. Obviously, instead of collapsing or expanding the left column, these buttons will collapse or expand the right column.


I have designed a quick demonstration page. We have not yet used cookies to remember which columns are expanded or collapsed. Therefore, when you collapse a column and refresh the page’, the column will return to its default state (i.e. fully expanded). Try it for your self!

Using Cookies

In most cases, this functionality added thus far is pretty useless.  What we really want is for the site to remember each user’s preferences. To do this, we will use the jQuery cookie plugin.

$(document).ready(function() {
// LEFT COLUMN:
    // When the collapse button is clicked:
    $('.collapseLeft').click(function() {
        $('.collapseLeft').css("display","none");
        $('.expandLeft').css("display","block");
        $('#leftCol').css("height","20px");
        $.cookie('leftCol', 'collapsed');
    });
    // When the expand button is clicked:
    $('.expandLeft').click(function() {
        $('.expandLeft').css("display","none");
        $('.collapseLeft').css("display","block");
        $('#leftCol').css("height","500px");
        $.cookie('leftCol', 'expanded');
    });
// RIGHT COLUMN:
    // When the collapse button is clicked:
    $('.collapseRight').click(function() {
        $('.collapseRight').css("display","none");
        $('.expandRight').css("display","block");
        $('#rightCol').css("height","20px");
        $.cookie('rightCol', 'collapsed');
    });
    // When the expand button is clicked:
    $('.expandRight').click(function() {
        $('.expandRight').css("display","none");
        $('.collapseRight').css("display","block");
        $('#rightCol').css("height","500px");
        $.cookie('rightCol', 'expanded');
    });
// COOKIES
    // Left column state
    var leftCol = $.cookie('leftCol');
    // Right column state
    var rightCol = $.cookie('rightCol');
    // Set the user's selection for the left column
    if (leftCol == 'collapsed') {
        $('.collapseLeft').css("display","none");
        $('.expandLeft').css("display","block");
        $('#leftCol').css("height","20px");
    };
    // Set the user's selection for the right column
    if (rightCol == 'collapsed') {
        $('.collapseRight').css("display","none");
        $('.expandRight').css("display","block");
        $('#rightCol').css("height","20px");
    };
 
});

Let’s walk through the new code.  In order to remember the user’s selection (i.e. which columns are collapsed or expanded), we must create a cookie for both the right and left column. The 1st line of code added creates (or updates) a cookie named ‘leftCol’. When the collapse button for the left column is clicked, we want to set the value of this cookie to ‘collapsed’:

$.cookie('leftCol', 'collapsed');

When the expand button for the left column is clicked, we want to update the value of this cookie to ‘expanded’:

$.cookie('leftCol', 'expanded');

We do the same for the right column. However, this time the cookie is named ‘rightCol’:

$.cookie('rightCol', 'collapsed');
 
$.cookie('rightCol', 'expanded');

So, now we have up to 2 cookies (note the words ‘up to’ since the cookies will only exist when the expand or collapse buttons are clicked for the first time). The values of these cookies depend on if the columns are expanded or collapsed. We now want to apply the user’s preferences when the page loads. This is obviously read from the cookies.

Firstly, We’ll created 2 variables:

// Left column state
 var leftCol = $.cookie('leftCol');
// Right column state
 
 var rightCol = $.cookie('rightCol');

We’ll create and assign the variable ‘leftCol’ the value of the cookie also named ‘leftCol’. Similarly, I’ve create and assign the variable ‘rightCol’ the value of the cookie named ‘rightCol’. This just makes life easier when we test the value of the cookies (as we’re about to do).

The final step is to apply the user’s selection. To do this, we will first deal with the left column:

if (leftCol == 'collapsed') {
  $('.collapseLeft').css("display","none");
  $('.expandLeft').css("display","block");
  $('#leftCol').css("height","20px");
};

This block of code first identifies if the value of the variable ‘leftCol’ (and hence the value of the cookie also named ‘leftCol’) is equal to ‘collapsed’. If this is true (i.e. if the user has selected to collapse the left column), the same actions are performed as when the collapse button for the left column is clicked (see the ‘Collapsible Layout’ section for more information). To refresh your memory, these actions are:

  • Hide the button which allows users to collapse the left column.
  • Display the button which allows users to expand the left column.
  • Set the height of the left column to 20px.

We do exactly the same for the right column:

if (rightCol == 'collapsed') {
        $('.collapseRight').css("display","none");
        $('.expandRight').css("display","block");
        $('#rightCol').css("height","20px");
};

Let’s take a look at the demo:


When we now refresh the page (or navigate to other pages using the same cookies), the selection is remembered. Please do post any comments you may have. Let me know what you think!





<a href="http://www.mysite.com/">some site</a>
<blockquote>quote</blockquote>
<em>some emphasized text</em>
<strong>some bold text</strong>
<pre lang="">some code</pre>
To add code to your comments, simply wrap the code inside <pre> tags. Syntax highlighting will be added if you define the language. Example:
<pre lang="php">some code</pre>

Supported "lang" attribute values: html4strict, css, php, javascript, xml & mysql