JQuery bascule avec les cookies: comment obtenir l’état réduit par défaut et restr accessible?

Je suis un débutant total, alors excusez mon incapacité à voir une solution évidente (le cas échéant). Cela dit, j’ai parcouru l’interweb pour trouver une réponse à cette question et j’ai seulement rencontré la même question. Ce que j’ai travaillé jusqu’à présent: en utilisant ce que j’ai trouvé sur http://www.tobypitman.com/multiple-collapsable-panels-with-cookies/ , j’ai réussi à faire basculer plusieurs conteneurs entre display:block et display:none , et je crée des cookies avec le cookie.js de Klaus Hartl.

Tout fonctionne terriblement! Sauf que je veux que l’état initial des conteneurs à bascule soit fermé. J’aimerais vraiment accomplir cela sans aucun display:none directement dans le CSS, donc le contenu rest accessible avec JS off. Je ne suis pas un programmeur, et ma méthode de force brute pour changer les choses ici et là jusqu’à ce qu’il se passe quelque chose ne coupe pas tout à fait. J’ai inclus les codes HTML, CSS et jQuery ci-dessous – la seule chose qui manquera à mon exemple est le sprite d’image CSS pour le

qui sert de déclencheur.

 Toggle with cookie 

• gérer des cookies volumineux ou utiliser un stockage local – jquery et le plugin cookie jquery
• Le bouton radio se lie avec la zone de texte à la mémoire locale ou le cookie ne fonctionne pas correctement
• Affichage des images dynamics à l’aide du code des cookies .NET
• cookies avec jQuery
• Qu’est-ce que je fais de mal avec ce cookie jQuery?

  .toggle-wrapper { overflow:hidden; display:block; } .toggle-wrapper .toggle-container { position:relative; overflow: hidden; } .toggle-wrapper h6.sortinggger { background: transparent url(images/sortinggger-sprite.png) no-repeat left top;/*sprite is 15x30px - plus sign on top, minus on bottom*/ height: 15px;/*half of sprite's height*/ cursor:pointer; padding:0 0 0 16px; margin:0; } .toggle-wrapper h6.active { background-position: left bottom;/*this is the open state, showing the minus sign part of sprite*/ padding:0 0 0 16px; }    /** * Get the value of a cookie with the given key. * * @example $.cookie('the_cookie'); * @desc Get the value of a cookie. * * @param Ssortingng key The key of the cookie. * @return The value of the cookie. * @type Ssortingng * * @name $.cookie * @cat Plugins/Cookie * @author Klaus Hartl/[email protected] */ jQuery.cookie = function (key, value, options) { // key and value given, set cookie... if (arguments.length > 1 && (value === null || typeof value !== "object")) { options = jQuery.extend({}, options); if (value === null) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } return (document.cookie = [ encodeURIComponent(key), '=', options.raw ? Ssortingng(value) : encodeURIComponent(Ssortingng(value)), options.expires ? '; expires=' + options.expires.toUTCSsortingng() : '', // use expires atsortingbute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // key and possibly options given, get cookie... options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; }; // http://www.tobypitman.com/multiple-collapsable-panels-with-cookies/ $(document).ready(function(){ $("div.toggle-wrapper h6").addClass("active"); var l = $('div.toggle-wrapper h6').length; var panel = $("div.toggle-wrapper div.toggle-container"); for (c=0;c<=l;c++){ var cvalue = $.cookie('panel' + c); if ( cvalue == 'closed' + c ) { $(panel).eq(c).css({display:"none"}); $(panel).eq(c).prev().removeClass('active').addClass('inactive'); }; }; $("div.toggle-wrapper h6.active").toggle( function () { var num = $("div.toggle-wrapper h6").index(this); var cookieName = 'panel' + num; var cookieValue = 'closed' + num; $(this).next("div.toggle-container").slideUp(500); $(this).removeClass('active'); $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); }, function () { var num = $("div.toggle-wrapper h6").index(this); var cookieName = 'panel' + num; $(this).next("div.toggle-container").slideDown(500); $(this).addClass("active"); $.cookie(cookieName, null, { path: '/', expires: 10 }); } ); $("div.toggle-wrapper h6.inactive").toggle( function () { var num = $("div.toggle-wrapper h6").index(this); var cookieName = 'panel' + num; $(this).next("div.toggle-container").slideDown(500); $(this).addClass("active"); $(this).removeClass('inactive'); $.cookie(cookieName, null, { path: '/', expires: 10 }); }, function () { var num = $("div.toggle-wrapper h6").index(this); var cookieName = 'panel' + num; var cookieValue = 'closed' + num; $(this).next("div.toggle-container").slideUp(500); $(this).removeClass('active'); $.cookie(cookieName, cookieValue, { path: '/', expires: 10 }); } ); });  

Déclencheur 1

La substance va à l’intérieur d’ici

Plus trucs

Plus encore

déclencheur 2

La substance entre ici

Plus de choses

Plus encore

Trigger 3

La substance entre ici

Plus de choses

Plus même

• Enregistrer la position de la division déplaçable dans LocalStorage?
• Cookie lire et écrire question- jQuery à JSP
• Comment mettre en évidence de nouveaux articles sur le site depuis la dernière visite avec jQuery?
• Impossible de faire fonctionner l’accordéon jQ U / cookie après la mise à niveau de jQ / UI
• Problème de cookie désactivé dans IE