Adding jquery cookie to content toggle

I'm using the following code to to produce a content area that opens and closes on click, with a plus/minus image that also toggles depending on state of content area. What I would like to do is add a jquery cookie that saves the state of the content area - how would I achieve this please? S

$(document).ready(function() {
                $("a.toggle").click(function() {
                    var img = $(this).find("img"); //get a handle of the image tag inside title link
                    var src = $(img).attr("src"); //get the source of the image                 
                    //toggle the source of the image to show either plus/minus
                    if (src.endsWith("search_open.jpg"))
                        src = src.replace('search_open.jpg', 'search_close.jpg');
                    else
                        src = src.replace('search_close.jpg', 'search_open.jpg');               
                    $(img).attr("src", src);                
                    //get the title of the anchor tag which corresponds to the id of the content div
                    var content = $(this).attr("title");
                    $(content).toggle();
                });                 
            });             
            String.prototype.endsWith = function(str) {
                return this.lastIndexOf(str) == this.length - str.length;
            }

Edit: final code/solution

$(document).ready(function() {                     开发者_如何学JAVA                    
                $("a.toggle").each(function () {
                    var img = $(this).find("img");
                    var src = $(img).attr("src");                        
                    var content = $(this).attr("title");
                    var isVisible = $.cookie('content');    
                    if (isVisible == 'true') {
                        $(content).show();
                        src = src.replace('search_open.jpg', 'search_close.jpg');
                    }
                    $(img).attr("src", src);    
                });                                                                          
                $("a.toggle").click(function() {
                    var img = $(this).find("img"); //get a handle of the image tag inside title link
                    var src = $(img).attr("src"); //get the source of the image                 
                    //toggle the source of the image to show either plus/minus
                    if (src.endsWith("search_open.jpg"))
                        src = src.replace('search_open.jpg', 'search_close.jpg');
                    else
                        src = src.replace('search_close.jpg', 'search_open.jpg');               
                    $(img).attr("src", src);                
                    //get the title of the anchor tag which corresponds to the id of the content div
                    var content = $(this).attr("title");
                    $(content).toggle();
                    $.cookie('content', $(content).is(':visible'));                     
                });                     
            });             
            String.prototype.endsWith = function(str) {
                return this.lastIndexOf(str) == this.length - str.length;
            }   

Use jQuery.cookie plugin to work with cookies. Store and get necessary data using it.

https://github.com/carhartl/jquery-cookie

Checkout test examples in the project:

https://github.com/carhartl/jquery-cookie/blob/master/test.js

$.cookie('c') // get cookie value
$.cookie('c', 'my value') // set cookie value

You will need to strore some marker (probably some autoincremental id) for each section you toggled, and then on $(document).ready(..) you will need to read and resotre state of these sections.

$(document).ready(function () {

    $("a.toggle").each(function () {
        var content = $(this).attr("title");
        var isVisible = $.cookie(content);
        if (isVisible) {
            $(content).show();
        }
    });

    $("a.toggle").click(function () {
        var img = $(this).find("img"); //get a handle of the image tag inside title link
        var src = $(img).attr("src"); //get the source of the image                 
        //toggle the source of the image to show either plus/minus
        if (src.endsWith("search_open.jpg"))
            src = src.replace('search_open.jpg', 'search_close.jpg');
        else
            src = src.replace('search_close.jpg', 'search_open.jpg');
        $(img).attr("src", src);
        //get the title of the anchor tag which corresponds to the id of the content div
        var content = $(this).attr("title");
        $(content).toggle();
        $.cookie(content, $(content).is(':visible'));
    });
});

String.prototype.endsWith = function (str) {
    return this.lastIndexOf(str) == this.length - str.length;
}

Yes you could use jQuery.cookie.

            $("a.toggle").click(function() {
                var img = $(this).find("img"); //get a handle of the image tag inside title link
                var src = $(img).attr("src"); //get the source of the image                 
                //toggle the source of the image to show either plus/minus
                if (src.endsWith("search_open.jpg"))
                    src = src.replace('search_open.jpg', 'search_close.jpg');
                else
                    src = src.replace('search_close.jpg', 'search_open.jpg');               
                $(img).attr("src", src);                
                //get the title of the anchor tag which corresponds to the id of the content div
                var content = $(this).attr("title");
                $(content).toggle();
                //this saves a string with true or false depending on the visibility
                //of your element. i use the title of the element as name for the cookie so that you can save more than one
                $.cookie(content, $(content).is(':visible') );
            });                 
        });