title: How to do a meta-toggle with jQuery
body: <p>I have a number of divs on a page.  In the top right corner of each div is an icon.  When the user clicks an icon, it shows/hides the div.  Here's the code:</p>
  
  <pre><code>$('div#display-area').on('click', 'span.fold-post-link', function() {        
      $('div.fold-post', $(this).parents('div.display-content')).toggle('blind');
  });
  </code></pre>
  
  <p>Now, at the very top of the page I have two icons - one is an up-arrow, the other is a down-arrow.  When the user clicks on the up arrow, I want it to hide all the divs; when they click on the down-arrow, I want to show all the divs.</p>
  
  <p>Initially I thought I could do this with one function, such as this:</p>
  
  <pre><code>// fold and unfold all posts
  $('div#display-area').on('click', '#master-folder', function() {      
      $('div.fold-post', 'div#display-area').toggle('blind');
  });
  </code></pre>
  
  <p>But that's no good since it visits each of the divs and reverses its state.  This means that if I have a few divs that are visible, they become hidden, and vice versa!</p>