Question

I’m creating af slide panel for the userOptions for my members. It’s working nicely with:

//Login panel, slideUp when clicked <-> slideDown
$('#loginPanel').click(function(){
    $('#userNav').slideToggle('fast');
});

But I would like the panel to stay open when you refresh the page or go to another page on the website. If the user close the panel it has to stay closed, untill opened again etc.

Is this possible?

* Add to answer *

For the instant “slide” i just added 1 to the speed:

$('#div').slideToggle(1);

and same for the other ones in the $.cookie.

Answer 1

Try using the $.cookie() plugin to set and remember the current state of the panel and load it accordingly on page refresh / change.

$(document).ready(function()
{
    // Open / Close Panel According to Cookie //    
    if ($.cookie('panel') == 'open'){    
        $('#userNav').slideDown('fast'); // Show on Page Load / Refresh with Animation
        $('#userNav').show(); // Show on Page Load / Refresh without Animation
    } else {
        $('#userNav').slideUp('fast'); // Hide on Page Load / Refresh with Animation
        $('#userNav').hide(); // Hide on Page Load / Refresh without Animation
    }

    // Toggle Panel and Set Cookie //
    $('#loginPanel').click(function(){        
        $('#userNav').slideToggle('fast', function(){
            if ($(this).is(':hidden')) {
                $.cookie('panel', 'closed');
            } else {
                $.cookie('panel', 'open');
            }
        });
    });
}

EDIT: Here’s fiddle to illustrate: http://jsfiddle.net/7m7uK/

You can use the fiddle and refresh the page to see the cookies work.

I hope this helps!