Saving States with jQuery.data()

While browsing the jQuery forums, I came across a pretty handy technique to store the states of objects. Additionally, a Forrst member named Ben Schmidt requested information on using jQuery to make a div slide out when an item is clicked (and most likely make it contract when clicked again).

Demo

As I'm not a designer by any stretch (that would be @vertjustin of Vert Studios), my demos are always bare-bones div boxes. But hey...I like boxes, and you should too! View the demo

CSS/HTML

The CSS is easy. Just have what you want to slide out positioned absolutely underneath what's on top using z-index. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head> 
    <title>Example Slider</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    
    <style type="text/css">
    #wrapper{
    position: absolute;
    top: 0px;
    left: 0px;
    }
    
    #form{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #FF0000;
    width: 400px;
    height: 400px;
    }
    
    #trigger{
    position: absolute;
    top: 0px;
    left: 250px;
    height: 20px;
    width: 150px;
    background-color: #FFFF00;
    cursor: pointer;
    z-index: 2;
    }
        
    #sliding{
    position: absolute;
    top: 0px;
    left: 200px;
    background-color: #000000;
    width: 200px;
    height: 400px;
    z-index: -1;
    }    
    </style>
        
</head> 
<body> 
    <div id="wrapper">
        <div id="form"></div>
        <div id="trigger">Click to expand!</div>
        <div id="sliding"></div>
    </div>    
</body> 
</html>

JavaScript

This is the fun part! Using logic and jQuery.data(), we're able to store the state of the sliding div. 
    <script type="text/javascript">    
    $(function()
    {
        $("#trigger").click(function()
        {
            $(this).data('contracted', !$(this).data('contracted'));
            var contracted = $(this).data('contracted');
            
            if(contracted)
            {
                $("#sliding").animate({left: '+=200px'}, 500);
                $("#trigger").html("Click to contract!");
            }
            else
            {
                $("#sliding").animate({left: '-=200px'}, 500);
                $("#trigger").html("Click to expand!");
            }            
        });
    });
    </script>

Logic Breakdown

So the item starts off in a contracted state. Thus, 'contracted' should be set to true by default. The use of logical negation helps our cause. The line 
$(this).data('contracted', !$(this).data('contracted'));
says "Store the logical negation of the 'contracted' property of $(this) into the 'contracted' property of $(this)". So when the DOM is loaded, $(this).data('contracted') is false since we have not assigned any value to it. Thus, by negating it through !$(this).data('contracted'), the value associated with $(this).data('contracted') is now true. It's important that we use the negation since you can't normally work with an undefined object. It's a logical game that has a wide array of uses! So if the item is contracted, we want it to expand. If it is expanded, we want it to contract. The animate method takes care of that for us.

Feedback

Have any questions/comments about storing states with jQuery.data()? Let us know in the comments below. January 18, 2011
About the Author:

Joseph is the lead developer of Vert Studios Follow Joseph on Twitter: @Joe_Query
Subscribe to the blog: RSS
Visit Joseph's site: joequery.me