jQuery Toggle Cookie

Question

I have the following code (Yes I know it's quite long winded, but I want to keep it as much the same as possible)

Hopefully it will make sense, but essentially what I want to do is when a user clicks one of the toggles it will create the relevant cookie and set its value to "Open" and then when they click it again it remove the cookie. And vice versa depending on whether the panel was open or not. So I'm trying to get the cookies to be created and removed in time with the toggle.

How do I do this? Thanks.

$("div#FilterType div.PanelContent ul").hide();
$("div#FilterLevel div.PanelContent ul").hide();
$("div#FilterAge div.PanelContent ul").hide();
$("div#FilterCategory div.PanelContent ul").hide();

$("div#FilterArea div.PanelContent ul").show();
$("div#FilterArea div.PanelContent p").hide();
$("div#FilterArea div.PanelContent div.MapPanel").show();
$("div#FilterArea div.PanelHead h2 span").addClass("selected");

$("div.Filter div.PanelHead h2").attr('title', 'Toggle Panel');

$("div#FilterType div.PanelHead").click(function (e) {
    $("div#FilterType div.PanelContent ul").slideToggle('fast');
    $("div#FilterType div.PanelContent p").slideToggle('fast');
    $("div#FilterType div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterType',
            $("div#FilterType div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');
});
$("div#FilterLevel div.PanelHead").click(function (e) {
    $("div#FilterLevel div.PanelContent ul").slideToggle('fast');
    $("div#FilterLevel div.PanelContent p").slideToggle('fast');
    $("div#FilterLevel div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterLevel',
            $("div#FilterLevel div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');

});
$("div#FilterAge div.PanelHead").click(function (e) {
    $("div#FilterAge div.PanelContent ul").slideToggle('fast');
    $("div#FilterAge div.PanelContent p").slideToggle('fast');
    $("div#FilterAge div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterAge',
            $("div#FilterAge div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');
});
$("div#FilterArea div.PanelHead").click(function (e) {
    $("div#FilterArea div.PanelContent ul").slideToggle('fast');
    $("div#FilterArea div.PanelContent p").slideToggle('fast');
    $("div#FilterArea div.PanelContent div.MapPanel").slideToggle('fast');
    $("div#FilterArea div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterArea',
            $("div#FilterArea div.PanelContent ul, div#FilterArea div.PanelContent div.MapPanel").is(":hidden") ? 'Collapsed' : 'Open');
});
$("div#FilterCategory div.PanelHead").click(function (e) {
    $("div#FilterCategory div.PanelContent ul").slideToggle('fast');
    $("div#FilterCategory div.PanelContent p").slideToggle('fast');
    $("div#FilterCategory div.PanelHead h2 span").toggleClass("selected");
    $.cookie('FilterCategory',
            $("div#FilterCategory div.PanelContent ul").is(":hidden") ? 'Collapsed' : 'Open');
});


// Checks the values of the cookies (if they exist) to open or close the panels

var FilterType = $.cookie('FilterType');
var FilterLevel = $.cookie('FilterLevel');
var FilterAge = $.cookie('FilterAge');
var FilterArea = $.cookie('FilterArea');
var FilterCategory = $.cookie('FilterCategory');

if (FilterType == 'Open')
{
    $("div#FilterType div.PanelContent ul").show();
    $("div#FilterType div.PanelContent p").hide();
    $("div#FilterType div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterType div.PanelContent ul").hide();
    $("div#FilterType div.PanelContent p").show();
    $("div#FilterType div.PanelHead h2 span").removeClass("selected");
}

if (FilterLevel == 'Open')
{
    $("div#FilterLevel div.PanelContent ul").show();
    $("div#FilterLevel div.PanelContent p").hide();
    $("div#FilterLevel div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterLevel div.PanelContent ul").hide();
    $("div#FilterLevel div.PanelContent p").show();
    $("div#FilterLevel div.PanelHead h2 span").removeClass("selected");
}

if (FilterAge == 'Open')
{
    $("div#FilterAge div.PanelContent ul").show();
    $("div#FilterAge div.PanelContent p").hide();
    $("div#FilterAge div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterAge div.PanelContent ul").hide();
    $("div#FilterAge div.PanelContent p").show();
    $("div#FilterAge div.PanelHead h2 span").removeClass("selected");
}

if (FilterArea == 'Open')
{
    $("div#FilterArea div.PanelContent ul").show();
    $("div#FilterArea div.PanelContent p").hide();
    $("div#FilterArea div.PanelContent div.MapPanel").show();
    $("div#FilterArea div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterArea div.PanelContent ul").hide();
    $("div#FilterArea div.PanelContent p").show();
    $("div#FilterArea div.PanelContent div.MapPanel").hide();
    $("div#FilterArea div.PanelHead h2 span").removeClass("selected");
}

if (FilterCategory == 'Open')
{
    $("div#FilterCategory div.PanelContent ul").show();
    $("div#FilterCategory div.PanelContent p").hide();
    $("div#FilterCategory div.PanelHead h2 span").addClass("selected");
}
else
{
    $("div#FilterCategory div.PanelContent ul").hide();
    $("div#FilterCategory div.PanelContent p").show();
    $("div#FilterCategory div.PanelHead h2 span").removeClass("selected");
}

EDIT: I've looked into using something like this:

$.cookie('FilterType', 
                $("div#FilterType").is(":hidden") ? null : 'Open');

OR

$.cookie('FilterType',
                $("div#FilterType").is(":hidden") ? 'Collapsed' : 'Open');

Would something like that work? and would the null work or does it need to be a value like the second example? From testing it allows the cookie to be created with the value of 'Open' but when the user clicks it again it doesn't change the value to the 'Collapsed'.

Is this because of the .is(":hidden") part?

Answer 1

Assuming you are using the jQuery cookie plugin, your code should work as expected.

$.cookie('name', null);

does effectively "delete" the cookie item. You should also specify appropriate expiration time so that the cookie values are persisted across browser sessions. e.g.

$.cookie('the_cookie', 'the_value', { expires: 365 });

A tip: you can use .toggle( showOrHide ) and .toggleClass( className, switch ) to simplify the code.