Toggling multiple div classes based on visibility through JQuery
<p>I'm trying to structure a group of links that will <code>.fadeIn()</code> <code>&lt;div&gt;</code>s based on which ones are clicked.  I would like to <code>.fadeOut()</code> any <code>&lt;div&gt;</code>s that don't coincide with the current link that is clicked.  I'm hoping it would also be possible to show all/hide all with a link as well.</p>

<p>For example :</p>

<pre><code>&lt;a href="#" id="showall"&gt;Show All&lt;/a&gt;
&lt;a href="#" id="link1"&gt;Link 1&lt;/a&gt;
&lt;a href="#" id="link2"&gt;Link 2&lt;/a&gt;
&lt;a href="#" id="link3"&gt;Link 3&lt;/a&gt;
&lt;a href="#" id="link4"&gt;Link 4&lt;/a&gt;


&lt;div class="all"&gt;
   &lt;div class="part1"&gt;SOME TEXT&lt;/div&gt;
   &lt;div class="part2"&gt;SOME TEXT&lt;/div&gt;
   &lt;div class="part3"&gt;SOME TEXT&lt;/div&gt;
   &lt;div class="part4"&gt;SOME TEXT&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>So clicking link 1 would show part 1, and so on and so on.  Now I can't seem to wrap my head around this, because originally my thought was to have a function for each link clicked that read something like :</p>

<pre><code> $("#link1").click(function() {
   $(".all").fadeOut();  //clear any divs that may be visible now
   $(".part1").fadeIn();  // display div coinciding with link   
 });
</code></pre>

<p>And then for show all simply have :</p>

<pre><code> $("#showall").click(function() {
   $(this).toggle("slow");
 });
</code></pre>

<p>But, of course I learned that by changing the visibility of a container, all elements within that container will be rendered invisible as well, regardless of if there are two commands in the function (I think.)</p>

<p>So instead, my thought was to write a function for each link that read</p>

<pre><code> $("#link1").click(function() {
   $(".part2, .part3, .part4").fadeOut();  //clear other divs
   $(".part1").fadeIn();  // display div coinciding with link   
 });
</code></pre>

<p>But I could have upwards of 25 links, and I already know there must be a more efficient way of doing this.  Is it possible to have a filter, perhaps <code>.all:visible</code> to tell which are visible and which are not, and then have those fade out?</p>
