title: Simple JQuery Expand All Collapse All Toggle
body: <p>I am expanding and collapsing divs. I also allow expand all and collapse all. The problem is if a div is already expanded, when the user clicks expand all, the expanded div will get collapsed, while the other divs will expand (and vice versa). How can I expand all the divs that are not already expanded, and collapse all the divs that are not already collapsed.</p>
  
  <pre><code>$(document).ready(function(){
      $(".toggle_container").hide();
  
      //Expand/Collapse Individual Boxes
      $("span.expand_heading").toggle(function(){
          $(this).addClass("active"); 
          }, function () {
          $(this).removeClass("active");
      });
      $("span.expand_heading").click(function(){
          $(this).nextAll(".toggle_container:first").slideToggle("slow");
      });
  
      //Show hide 'expand all' and 'collapse all' text
      $(".expand_all").toggle(function(){
          $(this).addClass("expanded"); 
          }, function () {
          $(this).removeClass("expanded");
      });
  
      //expand or collapse all boxes
      $(".expand_all").click(function(){
          $(".toggle_container").slideToggle("slow");
      });
  });
  </code></pre>