Question

I’m trying to structure a group of links that will .fadeIn() <div>s based on which ones are clicked. I would like to .fadeOut() any <div>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.

For example :

<a href="#" id="showall">Show All</a>
<a href="#" id="link1">Link 1</a>
<a href="#" id="link2">Link 2</a>
<a href="#" id="link3">Link 3</a>
<a href="#" id="link4">Link 4</a>


<div class="all">
   <div class="part1">SOME TEXT</div>
   <div class="part2">SOME TEXT</div>
   <div class="part3">SOME TEXT</div>
   <div class="part4">SOME TEXT</div>
</div>

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 :

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

And then for show all simply have :

 $("#showall").click(function() {
   $(this).toggle("slow");
 });

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.)

So instead, my thought was to write a function for each link that read

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

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 .all:visible to tell which are visible and which are not, and then have those fade out?

Answer 1

For the first part, clicking link1 should hide all divs but the one with class=part1

$("#link1").click(function() {
    $("div[class^=part]").fadeOut();
    $("div.part1").fadeIn();
});

And then for show all

$("#showall").click(function() {
    $("div[class^=part]").fadeIn();
});