Dynamic Expand and Collapse Jquery

Question

I'm nearly complete with this, so I have one final bug I need your help figuring out.

I'll start with the issue first...

Demo: http://jsbin.com/ucalu3/7/

Scenario 3 doesn't work. When you click "expand all" and click a question to collapse the answer, it works just fine. The issue is, now click "collapse all" and it will expand all the answers. I'd like it to actually collapse all the answers just as the "collapse all" link says it should instead of it expanding all the answers.

The other 2 scenarios work just fine, which are:

Scenario 1 works. (refresh the page to reset accordion) When you click “expand all”, it will change to “collapse all”. The answers will expand accordingly and the active question state will swap appropriately. When you click “collapse all”, all the questions/answers will return to its default state.

Scenario 2 works. (refresh the page to reset accordion) When you click a question first and then click "expand all", it will expand all the answers and when you click "collapse all" it will collapse all the answers.

---

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');
            }
          }
        );
  });

Thank you for your help!

Sincerely, Evan

Answer 1

I would check against the current text to eliminate any confusion, by replacing this check:

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

With this one:

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

You can test it out here.