JQueryすべて表示/非表示（FAQページ）

Question

FAQページで2つのjQuery関数を使用しています。最初の質問は、質問見出し（h4）がクリックされるたびに有効になります。基本的にはその答えを表示するためにスライドしますが、他のすべての回答が閉じられていることを確認します（つまり、一度に1つの回答のみが開いています）。 2番目の機能は、ページ上のすべての質問を表示/非表示にする機能です。

私の問題は、ユーザーがFAQの回答を開いている（最初の機能によって起動された）ときに表示/非表示を試みるたびに発生します。表示/非表示機能はトグルシステムを使用しているため、既に表示されているものを含め、すべての質問がトグルします。結果は、（すべてを表示すると言うと）すでに表示されているものを除き、すべての質問が表示されます。その答えは（トグルされているので）隠されています。理想的には、それは既に開いていたので開いたままになります。

この問題の最適な解決策は何ですか？次の2つのjQueryの機能は以下のとおりです。デモの目的のために

<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> 

、私が働いているページはこちらです：http://r-8.us/~richard.r8us/faq

Answer 1

代わりの

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

 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

を試してみてください

私はこれがあなたが達成しようとしているものと一直線になるかもしれないと思う：

ユーザーが一度にそれらのすべてを開くか、だけで1を読み取ることができるようにする私に（それは奇妙に思えた上でクリックされています新しいものを露光する際これはもはやオープンFAQセクションを崩壊

$(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"); 
     } 
    }); 
}); 

時間）。