Is there a jquery plugin to show/hide divs based on their class(category) on click

Question

I am working with a grid of small divs which have one of four classes and I would like to be able to fade classes in and out using an onclick event. For example if there are 10 divs and three are categorized as "class1"; upon clicking a link in a menu all BUT the class1 divs fade to completely hidden or barely visible. Similarly the other links would trigger the same effect for "class2" or "class3" etc. Also there needs to be a way to bring them all back. If anyone has an idea of something out there that does this already I would appreciate a shove in that direction.

Answer 1

$(".class1").fadeOut();

See the jQuery documentation for more details. With fadeIn() you can bring em back.

Answer 2

jquery already does this:

$(".class1").fadeOut("slow");
$(".class1").fadeIn("slow");

Answer 3

Very easily done with toggle:

$(document).ready(function() {
    $('#IDOfLink').click(function() {
        $('.class1').toggle("slow");//switch to show/hide when clicked
    });

    $('#anotherLinkID').click(function() {
        $('.class2').toggle("fast");//switch to show/hide when clicked
    });
    //...etc...
});

The markup would look like:

<a id="IDofLink">Click here to toggle divs with the class of class1</a>

<div class="class1">Blah blah</div>
<div class="class1">Another class1 div</div>

Answer 4

That is the very heart of jQuery! You want something like this:

$("#link-that-will-be-clicked").click(function() {
    $(".class2,.class3,.class4").fadeOut();
});

To make the solution cleaner, I recommend giving all the divs a common class, like common-class in addition to class1. So you might have:

<div class="common-class class1"></div>

This will let you write something as simple as:

$("#link-that-will-be-clicked").click(function() {
    $(".common-class:not(.class1)").fadeOut();
});

And to restore all:

$(".common-class").fadeIn();