Having trouble setting / modifying cookies

Question

I'm working on the admin interface for a plugin I'm developing, and it involves collapsible layouts. I want the state of the layout to be remembered when the page is refreshed, so I'm trying to use some simple cookies to do so.

In the interface, there are "collapse" buttons that collapse sections of the admin panel. Whenever a button is clicked, I need a cookie set for the state of that section. So if a section is closed, a cookie needs to be created to remember that. Then, if the same button is clicked, the cookie needs to be modified to indicate that the section has been reopened.

Here's the code I have so far for setting a cookie to true (or false) when a button is clicked:

    $('.ss-show-collapse').click(function(){
            var collapse_anchor = '.'+$(this).attr("id")+' span';
            show_collapse = '.ss-show'+$(this).attr("id").replace('ss-show-collapse', '');
            $(show_collapse ).toggleFade('slow');
            $(collapse_anchor).toggle();
            if (getCookie($(this).attr("id")) == true) {
                setCookie($(this).attr("id"), false, 1);
            } else {
                setCookie($(this).attr("id"), true, 1);
            }
            alert(getCookie($(this).attr("id"))); // just to see that the cookie was modified
        return false;
    });

It works fine to set the cookie to "true" the first time, but will never delete the cookie if it already exists.

Answer 1

if (getCookie($(this).attr("id")) == true) {

The above code will NEVER evaluate as true because cookie values are stored as strings. You are trying to store a boolean value, which is converted to a string when it is written to the cookie. When the browser reads the cookie value, it is also read as a string.

The fixed version of your code should be:

$('.ss-show-collapse').click(function(){
    var collapse_anchor = '.'+$(this).attr("id")+' span';
    show_collapse = '.ss-show'+$(this).attr("id").replace('ss-show-collapse', '');
    $(show_collapse ).toggleFade('slow');
    $(collapse_anchor).toggle();
    if (getCookie($(this).attr("id")) == 'true') {
        setCookie($(this).attr("id"), 'false', 1);
    } else {
        setCookie($(this).attr("id"), 'true', 1);
    }
    return false;
});

I would also suggest looking into using event.preventDefault(); instead of return false; http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

$('.ss-show-collapse').click(function(event){
    var collapse_anchor = '.'+$(this).attr("id")+' span';
    show_collapse = '.ss-show'+$(this).attr("id").replace('ss-show-collapse', '');
    $(show_collapse ).toggleFade('slow');
    $(collapse_anchor).toggle();
    if (getCookie($(this).attr("id")) == 'true') {
        setCookie($(this).attr("id"), 'false', 1);
    } else {
        setCookie($(this).attr("id"), 'true', 1);
    }
    event.preventDefault();
});

Answer 2

You don’t have to delete it, just change the value to false or set an expired date.