Question

I’m using two jQuery functions on an FAQ page. The first one activates whenever a question heading (h4) is clicked. It basically slides to show that answer but also makes sure that all other answers are closed (i.e. only 1 answer is open at a time). The second function is one that shows/hides ALL the questions on the page.

My issue arises whenever a user has an FAQ answer open (activated by the first function) and then tries to do a show/hide all. The show/hide function uses a toggling system, so this causes ALL the questions to toggle, including the one that is already showing. The result is that (using say, show all) all questions are shown except the one that was already being shown. That answer is hidden (because it was toggled). Ideally it would stay open since it was already open.

What is the best solution to this problem? The two jQuery functions are as follows:

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

For demo purposes, the page I am working on is available here: http://r-8.us/~richard.r8us/faq

Answer 1

Instead of

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

try

      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;