title: Toggle ExpandAll/CollapseAll
body: <p>I am currently using jQuery toggle to toggle between show and hide. It works perfectly fine for individual elements. When I try to do a expand all and collapse all it works fine for all the condition except one. If any individual element is already expanded or collapsed it does toggle them but not as expected. That is, when I click on expand all it expands all the elements except the individual element which is already expanded get collapsed and vice-versa. How do I take care of this condition?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(".toggle_container").hide();
      $("div.description-content-title").toggle(function () {
          $(this).addClass("collArrow");
      }, function () {
          $(this).removeClass("collArrow");
      });
      $("div.description-content-title").click(function () {
          $(this).next(".toggle_container").slideToggle("slow");
      });
  
      $(".close-all").toggle(function () {
          $(".close-all a").text("[Expand All]");
      }, function () {
          $(".close-all a").text("[Close All]");
      });
  
      $(".close-all").click(function () {
          $(".toggle_container").slideToggle("slow");
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="news-top-head"&gt;
      &lt;div class="time-head sortable" data-sort-column="ContentDate"&gt;
          &lt;span style="float: left; width: auto;"&gt;Time&lt;/span&gt; &lt;span class="sort-order-hidden ui-icon" /&gt;
      &lt;/div&gt;
      &lt;div class="description-head sortable" data-sort-column="ContentTitle"&gt;
          &lt;span style="float: left; width: auto;"&gt;Description&lt;/span&gt; &lt;span class="sort-order-hidden ui-icon" /&gt;
      &lt;/div&gt;
      &lt;div class="close-all"&gt;
          &lt;a href="#"&gt;close all&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="description-content"&gt;
      &lt;div class="description-content-title expArrow"&gt;&lt;%=breakingNews[index].ContentTitle%&gt;&lt;/div&gt;
          &lt;div class="toggle_container"&gt;
              &lt;p &gt;&lt;%=breakingNews[index].ContentDescription%&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If you have any code sample it would be really helpful.</p>