Sidebar jQuery Toggle : Enregistrer l'état du toggle

Bonjour,

J'ai une sidebar fixe avec un menu jQuery Toggle qui ouvre une liste.

- Au premier clic, ma liste s'ouvre et un cookie "Yes" s'enregistre.
- Au deuxième clic, ma liste se ferme et un cookie "No" remplace le premier.

A partir de ces cookies, je souhaite enregistrer l'état du Toggle en rafraichissant la page par exemple.

Voici mon menu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul>
        <li class="sidebarItem">
                <a href="#" id="SlideFolder" class="sidebarLink"><i class="menubarFolder"></i>Dossiers<i class="sidebarArrowFolder"></i></a>
                <?php if($_COOKIE['slideFolder'] == 'yes') { ?>
                <ul id="SlideSubFolder" style="display:block;">
                        <li><a href="" class="SlideSubLink">Les étoiles</a></li>
                        <li><a href="" class="SlideSubLink">Le système solaire</a></li>
                        <li><a href="" class="SlideSubLink">Univers & galaxies</a></li>
                        <li><a href="" class="SlideSubLink">Choisir son télescope</a></li>
                        <li><a href="" class="SlideSubLink">Observer le ciel</a></li>
                </ul>
                <?php } elseif($_COOKIE['slideFolder'] == 'no') { ?>
                <ul id="SlideSubFolder" style="display:none;">
                        <li><a href="" class="SlideSubLink">Les étoiles</a></li>
                        <li><a href="" class="SlideSubLink">Le système solaire</a></li>
                        <li><a href="" class="SlideSubLink">Univers & galaxies</a></li>
                        <li><a href="" class="SlideSubLink">Choisir son télescope</a></li>
                        <li><a href="" class="SlideSubLink">Observer le ciel</a></li>
                </ul>
                <?php } ?>
        </li>
</ul>

Le problème d'un Toggle c'est qu'il se réinitialise quand on actualise la page, et donc pour fermer ma liste, j'ai besoin de cliquer 2 fois sur le lien Toggle.

Vous pouvez aller sur la page pour tester et mieux comprendre : http://www.web-astronomie.fr et cliquez sur "Dossiers", ensuite actualisez la page, la petite flèche se place vers le bas, indiquant que le Toggle s'est réinitialisé.

Voici mon js :

Code:

1
2
3
4
5
6
7
8
var J = jQuery.noConflict();
var showStatut = jQuery.cookie('slideFolder') == 'yes';
if(showStatut) { J("ul#SlideSubFolder").show(); } else { J("ul#SlideSubFolder").hide(); }
J(document).ready(function(){
        J("a#SlideFolder").toggle(function(){ jQuery.cookie('slideFolder', 'yes'); J("ul#SlideSubFolder").slideDown(100); J("i.sidebarArrowFolder").addClass("sidebarArrowFolderOpen"); J("i.sidebarArrowFolder").removeClass("sidebarArrowFolder"); },function(){ jQuery.cookie('slideFolder', 'no'); J("ul#SlideSubFolder").slideUp(100); J("i.sidebarArrowFolderOpen").addClass("sidebarArrowFolder"); J("i.sidebarArrowFolderOpen").removeClass("sidebarArrowFolderOpen"); });
        J("a#SlideComm").toggle(function(){ jQuery.cookie('slideComm', 'yes'); J("ul#SlideSubComm").slideDown(100); J("i.sidebarArrowComm").addClass("sidebarArrowCommOpen"); J("i.sidebarArrowComm").removeClass("sidebarArrowComm"); },function(){ jQuery.cookie('slideComm', 'no'); J("ul#SlideSubComm").slideUp(100); J("i.sidebarArrowCommOpen").addClass("sidebarArrowComm"); J("i.sidebarArrowCommOpen").removeClass("sidebarArrowCommOpen"); });
        J("a#SlideSupport").toggle(function(){ jQuery.cookie('slideSupport', 'yes'); J("ul#SlideSubSupport").slideDown(100); J("i.sidebarArrowSupport").addClass("sidebarArrowSupportOpen"); J("i.sidebarArrowSupport").removeClass("sidebarArrowSupport"); },function(){ jQuery.cookie('slideSupport', 'no'); J("ul#SlideSubSupport").slideUp(100); J("i.sidebarArrowSupportOpen").addClass("sidebarArrowSupport"); J("i.sidebarArrowSupportOpen").removeClass("sidebarArrowSupportOpen"); });
});

Merci d'avance pour vos réponses !