Une simple cachette / afficher pour les FAQ qui sauve au cookie

Question

Pourquoi cela n'enregistre-t-il pas le cookie lorsque vous actualisez la page?

http://jsfiddle.net/jbvbl/

Ou serait-ce mieux pratique de sauver un seul cookie avec la valeur de chaque Li avec ".active"

var hideshow = $(".hideShow");

hideshow.children().not(".active").each(function(index, value){
    var tis = $(this);

    if($.cookie('hideShow_id'+index) == index){
        tis.addClass(".active");
    } else {
        $(this).find("div").hide();
    }            
});

hideshow.find('h3').click(function(e){
    var tis = $(this);
    var tisindex= tis.parents("li").index;
        $.cookie('hideShow_id' + tisindex, tisindex);

        tis.next().slideToggle('2000');
        tis.parent().toggleClass('active');
    e.preventDefault();
});


<ul class="hideShow">
        <li class="active">
         <h3><a href="javascript:;">Pellentesque nec leo cursus ipsum rhoncus volutpat nec eget mi.</a></h3>
         <div>
               <p>Nam velit metus, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum dolor sit amet</p>
             <ul>
                 <li>
                     <strong>Pellentesque</strong> nec leo cursus ipsum rhoncus volutpat nec eget mi.</li>
                 <li>

                     <strong>Nam</strong> quis lectus enim, ac euismod urna.</li>
                 <li>
                     <strong>Donec</strong> varius massa augue, at feugiat tortor.</li>
             </ul>
         </div>
    </li>
    <li>
     <h3><a href="javascript:;">Pellentesque nec leo cursus ipsum rhoncus volutpat nec eget mi.</a></h3>
     <div>
           <p>Nam velit metus, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum dolor sit amet</p>
         <ul>
             <li>
                 <strong>Pellentesque</strong> nec leo cursus ipsum rhoncus volutpat nec eget mi.</li>
             <li>

                 <strong>Nam</strong> quis lectus enim, ac euismod urna.</li>
             <li>
                 <strong>Donec</strong> varius massa augue, at feugiat tortor.</li>
         </ul>
     </div>
    </li>
    <li>
     <h3><a href="javascript:;">Pellentesque nec leo cursus ipsum rhoncus volutpat nec eget mi.</a></h3>
     <div>
           <p>Nam velit metus, vulputate eget sodales ut, dignissim vehicula nisi. Lorem ipsum dolor sit amet</p>
         <ul>
             <li>
                 <strong>Pellentesque</strong> nec leo cursus ipsum rhoncus volutpat nec eget mi.</li>
             <li>

                 <strong>Nam</strong> quis lectus enim, ac euismod urna.</li>

         </ul>
     </div>
    </li>
</ul> 

Utilisant: https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js

Answer 1

Vous créez un cookie différent pour chaque index, et ils ne correspondent jamais à celui que vous recherchez sur le chargement de la page. De plus, vous avez différentes cordes de nom de cookie 'hideShow-id' vs 'hideShow_id'

Answer 2

 if($.cookie('hideShow-id') == index){

et

 $.cookie('hideShow_id' + tisindex, tisindex);

sont clairement deux cookies complètement différents

ÉDITER:

Vous abusez également horriblement index. Tout d'abord, c'est une fonction, pas une propriété. Mais même alors, vous allez obtenir des index différents sur la charge et cliquer parce que vous confondez deux index différents

tis.parents("li").index()

est l'index si le li Tag parmi ses frères et sœurs, où comme

.each(function(index, value)

vous donnera un index dans l'ensemble que vous itérez, qui sont clairement deux ensembles différents, en raison du .not(".active") partie.