Panneau coulissant à bascule jQuery

Question

J'utilise le panneau coulissant qui, par défaut, est réglé sur: aucun. Si le déclencheur est cliqué, il basculera la classe sur "active". Cela fait que le déclencheur montre un x rouge (pour fermer) qui vient d'une position d'image-objet.

$(document).ready(function(){ 
$(".info-panel-left-trigger").click(function(){ 
$("#info-panel-left").toggle(400);//switching between display and display:none 
$(this).toggleClass("active"); 
return false; 
}); 

}); Donc, c'est ce que j'ai, mais maintenant vient ce que je veux et peut-être que l'un d'entre vous a compris comment y parvenir.
Je voudrais créer l'option pour que le panneau soit affiché par défaut ou masqué par défaut et que le bouton bascule se comporte en conséquence. Cela signifierait que si j'ai choisi d'afficher le panneau par défaut, la bascule doit être définie sur "active" afin d'afficher la position de l'image-objet x. Si j'ai choisi de masquer le panneau par défaut, la bascule doit être réglée sur "non actif" afin d'afficher la position du sprite +.

J'espère que je me suis fait assez clair. L'aide est très appréciée.

EDIT Vous avez raison. Quelques explications supplémentaires sont nécessaires. Je voulais juste que ce soit le plus court possible, mais en voici d'autres ...

Je crée un modèle de site Web et l'acheteur du modèle devrait être en mesure d'inclure ces panneaux à des fins d'information. Par défaut, il doit être configuré pour afficher le panneau et avoir défini la classe de déclenchement sur "active". Cela montrerait mon petit x pour fermer.
Mais si l'acheteur du modèle ajoute la classe supplémentaire "hide" au tableau de bord, le panneau devrait être masqué par défaut et le déclencheur ne devrait pas être activé car dans ce cas, mon déclencheur afficherait le petit + pour ouvrir ce panneau . Vous avez mon idée maintenant?

Answer 1

Où (et quelle persistance) stockez-vous cette valeur par défaut? Juste sur le client pour cette session, ou côté serveur? Le côté serveur me semble le plus logique. Si c'est le cas, lorsque l'utilisateur a choisi d'afficher le panneau, ajoutez une classe au code HTML de info-panel-left. En supposant que nous avons alors

<div id="info-panel-left" class="shown"></div> 

Ajouter un peu de javascript il lit

$(document).ready(function(){ 
    var infoPanel = $('#info-panel-left'); 
    var infoPanelTrigger = $('.info-panel-left-trigger'); 

    if (infoPanel.hasClass('shown')) { 
     infoPanel.show(); 
     infoPanelTrigger.addClass('active'); 
    } 
    ... etc ... 

(vous pouvez simplement utiliser la classe 'active' et bien sûr)

EDIT: D'accord; si on s'en tient à la partie JS, je ne pense pas que cela change beaucoup l'approche, n'est-ce pas? Il suffit de le renverser:

<div id="info-panel-left" class="hide"></div> 

puis

$(document).ready(function(){ 
    var infoPanel = $('#info-panel-left'); 
    var infoPanelTrigger = $('.info-panel-left-trigger'); 

    if (infoPanel.hasClass('hide')) { 
     infoPanel.hide(); 
     infoPanelTrigger.removeClass('active'); 
    } 
    ... click trigger, toggle etc ...