Dynamique Développer et Réduire Jquery

Question

Je suis presque complet avec ceci, donc j'ai un dernier bug dont j'ai besoin de votre aide.

Je vais commencer par la question d'abord ...

Démo: http://jsbin.com/ucalu3/7/

Scénario 3 ne fonctionne pas. Lorsque vous cliquez sur "tout développer" et cliquez sur une question pour réduire la réponse, cela fonctionne très bien. Le problème est, maintenant cliquez sur "tout réduire" et il développera toutes les réponses. Je voudrais vraiment réduire toutes les réponses tout comme le lien "tout réduire" dit qu'il devrait plutôt que d'étendre toutes les réponses.

Les 2 autres scénarios fonctionnent très bien, qui sont:

Scénario 1 œuvres. (actualisez la page pour réinitialiser accordéon) Lorsque vous cliquez sur "tout développer", il va changer pour "réduire tout". Les réponses se développeront en conséquence et l'état de la question active sera permuté de manière appropriée. Lorsque vous cliquez sur "Tout réduire", toutes les questions/réponses reviennent à leur état par défaut.

Le scénario 2 fonctionne. (actualisez la page pour réinitialiser l'accordéon) Lorsque vous cliquez d'abord sur une question puis cliquez sur "tout développer", il développera toutes les réponses et lorsque vous cliquerez sur "tout réduire", toutes les réponses seront effacées.

---

code

$(document).ready(function() 
    { 
     $('.question').click(function() 

     { 
      if($(this).next().is(':hidden') != true) 
      { 
       $(this).removeClass('active'); 
       $(this).next().slideUp('normal'); 
      } 
      else 
      { 
       $('.question').removeClass('active'); 
       $('.answer').slideUp('normal'); 

       if($(this).next().is(':hidden') == true) 
       { 
        $(this).addClass('active'); 
        $(this).next().slideDown('normal'); 
       } 
      } 
     }); 

     $('.answer').hide(); 

     $('.swap').click(function() 

      { 
      if($('.question').next().is(':hidden') != true) 
      { 
       $('.answer').slideUp('normal'); 
       $('.question').removeClass('active'); 
       $(this).text($(this).text() == 'Expand All' ? 'Collapse All' : 'Expand All'); 
      } 
      else 
      { 
       $('.answer').slideDown('normal'); 
       $('.question').addClass('active'); 
       $(this).text($(this).text() == 'Expand All' ? 'Collapse All' : 'Expand All'); 
      } 
      } 
     ); 
    }); 

Merci pour votre aide!

Sincèrement, Evan

Answer 1

Je vérifierais contre le texte actuel afin d'éliminer toute confusion, en remplaçant cette vérification:

if($('.question').next().is(':hidden') != true) 

Avec celui-ci:

if($(this).text() == 'Collapse All') 

You can test it out here.