JQuery Alle ein-/ausblenden (FAQ-Seite)

Question

Ich verwende zwei jQuery-Funktionen auf einer FAQ-Seite. Der erste wird aktiviert, wenn auf eine Fragenüberschrift (h4) geklickt wird. Es gleitet im Wesentlichen, um diese Antwort zu zeigen, stellt aber auch sicher, dass alle anderen Antworten geschlossen sind (d. H. Nur eine Antwort ist zu einem Zeitpunkt offen). Die zweite Funktion ist eine, die ALLE Fragen auf der Seite anzeigt/verbirgt.

Mein Problem tritt immer dann auf, wenn ein Benutzer eine FAQ-Antwort geöffnet hat (durch die erste Funktion aktiviert) und dann versucht, alle anzuzeigen/zu verbergen. Die show/hide-Funktion verwendet ein Toggle-System, das bewirkt, dass ALLE Fragen umgestellt werden, einschließlich der Frage, die bereits angezeigt wird. Das Ergebnis ist, dass (mit say, show all) alle Fragen angezeigt werden, mit Ausnahme der Frage, die bereits angezeigt wurde. Diese Antwort ist versteckt (weil sie umgeschaltet wurde). Idealerweise würde es offen bleiben, da es bereits geöffnet war.

Was ist die beste Lösung für dieses Problem? Die beiden jQuery-Funktionen sind wie folgt:

<script> 
// Clicking a question will show that answer and hide all others 
$(function() { 
    $('#faqQuestions h4').each(function() { 
    var tis = $(this), 
    state = false, 
    answerNext = tis.next('div').hide().css('height','auto').slideUp(); 
    answerAll = $('#faqQuestions').children('div').hide().css('height','auto').slideUp(); 
    tis.click(function() { 
     state = !state; 
     answerAll.slideUp(state); 
     $('#faqQuestions').children('h4').removeClass('active'); 
     answerNext.slideToggle(state); 
     tis.addClass('active',state); 
    }); 
    }); 
}); 
</script> 

<script> 
// Show/hide all questions 
var toggle = false; 
$(function() { 
    $('a.toggle').click(function(e) { 
     var $this = $(this); 
     $('#faqQuestions div').toggle(300,function() { 
      if(!toggle) { 
       $this.text('Hide All Questions/Answers'); 
       toggle = !toggle; 
      }else { 
       $this.text('Show All Questions/Answers'); 
       toggle = !toggle; 
      } 
     }); 
     e.preventDefault(); 
    }); 
}); 
</script> 

Für Demozwecke, die Seite an dem ich arbeite ist hier verfügbar: http://r-8.us/~richard.r8us/faq

Answer 1

Statt

$('#faqQuestions div').toggle(300,function() { 
     if(!toggle) { 
      $this.text('Hide All Questions/Answers'); 
      toggle = !toggle; 
     }else { 
      $this.text('Show All Questions/Answers'); 
      toggle = !toggle; 
     } 
    }); 

versuchen

 if(!toggle) { 
      $('#faqQuestions div').show(300); 
      $this.text('Hide All Questions/Answers'); 
     }else { 
      $('#faqQuestions div').hide(300); 
      $this.text('Show All Questions/Answers'); 
     } 
     toggle = !toggle; 

Answer 2

Ich denke, etwas wie das könnte mehr im Einklang mit dem sein, was Sie erreichen möchten:

$(function() { 
    var allOpen = false; 

    $("#faqQuestions h4").click(function() { 
     var h4 = $(this); 

     if(!h4.hasClass("active")) { 
      h4.addClass("active").next("div").slideToggle(); 
     } 
     else { 
      h4.removeClass("active").next("div").slideToggle(); 
     } 
    }); 
    $('a.toggle').click(function(e) { 
     e.preventDefault(); 
     $("#faqQuestions h4").each(function() { 
      var h4 = $(this); 

      if(!allOpen && !h4.hasClass("active")) {   
       h4.addClass("active").next("div").slideToggle(); 
      } 
      else if(allOpen) { 
       h4.removeClass("active").next("div").slideToggle(); 
      } 
     }); 
     if(!allOpen) { 
      allOpen = true; 
      $(this).text("Hide All Questions/Answers"); 
     } 
     else { 
      $(this).text("Show All Questions/Answers"); 
     } 
    }); 
}); 

Diese nicht mehr jeden offenen FAQ-Bereich zusammenzubricht, wenn die neue Belichtung, die ein Benutzer zu ermöglichen, auf (es schien seltsam für mich geklickt wurde auf einmal alle von ihnen zu öffnen oder nur in der Lage sein, eine auf einem lesen Zeit).