Why does Toggle() set the cookie value, but slideToggle() does not

Question

Here is my JFiddle:

http://jsfiddle.net/TM4Yd/2/

In my code, I have used $("ul#nav-Expanded").slideToggle(); to toggle the visibility of the <ul> #nav-Expanded. I am expecting that when it is toggled, the value of the cookie will change between true and false. But it doesn't. If I change the line to just $("ul#nav-Expanded").toggle(); without the slide effect, then the cookie is being set correctly.

How can I set the cookie value per toggle respectively and have the slide effect? Its too abrupt to have the menu just show or hide without any transition.

In the JSFiddle please ignore all the code until you see the comment "//BEGIN MAIN JQUERY CODE". This is where my code begins.

Answer 1

Add it to the callback of slideToggle() instead:

$("ul#nav-Expanded").slideToggle(function() {
    var isVisible = $('ul#nav-Expanded').is(':visible').toString();
    $.cookie('nav-expanded', isVisible);
});

It doesn't work because .is(':visible') isn't set while the menu is still sliding out and $.cookie() is set to the initial state of isVisible instead.