title: Collapsible list with jQuery - How to update Expand/Collapse all button
body: <p>I've got a list of items which can be expanded/collapsed individually or all at once with an Expand All/Collapse All button.
  All the items start collapsed, but if you manually expand item so that every item is expanded, the 'Expand All' button should change to 'Collapse All'.  Similarly if you collapse all the items it should change to 'Expand All'.</p>
  
  <p>So every time you click on an individual line, it should check to see if ALL the items have now been collapsed/expanded, and if so, update the Expand/Collapse All button.</p>
  
  <p>My problem is that I'm not sure how to iterate over all the items on a click to see if they are collapsed or not and properly update.</p>
  
  <p>Here is a JSFiddle for this: <a href="http://jsfiddle.net/iblizzard/vTDV6/" rel="nofollow">JSFiddle</a></p>
  
  <p>Here is my current code:</p>
  
  <pre><code>    var expand = true;
  
  jQuery.noConflict();
  jQuery(function() {
      jQuery('[id^=parentrow]')
      .attr("title", "Click to expand/collapse")
      .click(function() {
          jQuery(this).siblings('#childrow-' + this.id).toggle();
          jQuery(this).toggleClass("expanded collapsed");
          ExpandCollapseCheck();
      });
  
      jQuery('[id^=parentrow]').each(function() {
          jQuery(this).siblings('#childrow-' + this.id).hide();
  
          if (jQuery(this).siblings('#childrow-' + this.id).length == 0)
              jQuery(this).find('.expand-collapse-control').text('\u00A0');
      });
  
      jQuery('#childrow-' + this.id).hide("slide", { direction: "up" }, 1000).children('td');
  
  
  });
  
  function CollapseItems() {
      jQuery('[id^=parentrow]').each(function() {
          jQuery(this).siblings('#childrow-' + this.id).hide();
  
          if (!jQuery(this).hasClass('expanded collapsed'))
              jQuery(this).addClass("expanded collapsed");
      });
  }
  
  function ExpandItems() {
      jQuery('[id^=parentrow]').each(function() {
          jQuery(this).siblings('#childrow-' + this.id).show();
  
          if (jQuery(this).hasClass('expanded collapsed'))
              jQuery(this).removeClass("expanded collapsed");
  
      });
  }
  
  function ExpandCollapseChildren() {
  
      if (!expand) {
          CollapseItems();
          jQuery('.expander').html('Expand All');
      }
      else {
          ExpandItems();
          jQuery('.expander').html('Collapse All');
      }
  
      expand = !expand;
      return false;
  }
  
      function ExpandCollapseCheck() {
      if ((jQuery('[id^=parentrow]').hasClass('expanded collapsed')) &amp;&amp; (expand)) {
          jQuery('.expander').html('Expand All');
          CollapseItems();
          expand = !expand;
      }
      else if ((!jQuery('[id^=parentrow]').hasClass('expanded collapsed')) &amp;&amp; (!expand)) {
          jQuery('.expander').html('Collapse All');
          ExpandItems();
          expand = !expand;
      }
  }    
  </code></pre>