Question

I have setup a sidebar via the jQuery API. Now I noticed that when I refresh the page, the sidebar is going to close itself automatically.

I found a cookie thing on the internet but for some reason it does not work with my sidebar script.

What am I doing wrong?

$(document).ready(function() {
    var sidebar_status = $.cookie("sidebar_status");

    if (sidebar_status == null) {
        $("a#ToggleSidebar").addClass('closed');
        $("#sidebar").hide();
    };

    if (sidebar_status == "closed") {
        $("a#ToggleSidebar").removeClass('open');
        $("a#ToggleSidebar").addClass('closed');
        $("#sidebar").css("display", "none");
    };

    if (sidebar_status == "open") {
        $("a#ToggleSidebar").addClass('open');
    };


    $("a#ToggleSidebar").click(function() {
        if ($("a#ToggleSidebar").attr("class") == 'open') {
            $(this).removeClass('open');
            $(this).addClass('closed');
            $.cookie("sidebar_status", "closed", {
                path: '/',
                expires: 100
            });
            $("#sidebar").animate({
                width: 'hide',
                opacity: 'hide'
            }, 'slow');
        } else {
            $(this).removeClass('closed');
            $(this).addClass('open');
            $.cookie("sidebar_status", "open", {
                path: '/',
                expires: 100
            });
            $("#sidebar").animate({
                width: 'show',
                opacity: 'show'
            }, 'slow');
        }
    });

EDIT:

There is something like a button <a href="#"></a> which should open a <div></div>. Now, I expect that when somebody visits the page the first time, that the <div></div> is closed. When the user clicks on the <a href="#"></a> it opens the <div></div> and saves a cookie. When the user should now refresh the page, the <div></div> should stay open until the user uses the <a href="#"></a> to close it again. That is what I can not get to work.

Answer 1

Comment from OP: Now the Sidebar opens and a cookie is saved on the computer, when I however try to close the sidebar again, nothing happens.

For jQuery 1.6 and up, this…

if ($("a#ToggleSidebar").attr("class") == 'open') {

should be this (replace attr with prop)…

if ($("a#ToggleSidebar").prop("class") == 'open') {

But this is best…

if ($("a#ToggleSidebar").hasClass("open")) {

---

This…

$(this).removeClass('open');
$(this).addClass('closed');

….can simply be written as this (it’s called chaining)…

$(this).removeClass('open').addClass('closed');

---

While we’re at it…

This:

if (sidebar_status == null) {
    $("a#ToggleSidebar").addClass('closed');
    $("#sidebar").hide();
};

if (sidebar_status == "closed") {
    $("a#ToggleSidebar").removeClass('open');
    $("a#ToggleSidebar").addClass('closed');
    $("#sidebar").css("display", "none");
};

if (sidebar_status == "open") {
    $("a#ToggleSidebar").addClass('open');
};

…can be written like this….

if (sidebar_status == null) {
    $("a#ToggleSidebar").addClass('closed');
    $("#sidebar").hide();
} else if (sidebar_status == "closed") {
    $("a#ToggleSidebar").removeClass('open').addClass('closed');
    $("#sidebar").hide();
} else if (sidebar_status == "open") {
    $("a#ToggleSidebar").addClass('open').removeClass('closed');
};

(jQuery .hide() is equivalent to jQuery .css("display", "none");)