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

Question

I work with a grid of small divs that have one of four classes, and I would like to fade out classes in and out of using the onclick event. For example, if 10 sections and three belong to the category "class1"; when you click on the link in the menu, everything, BUT class 1 dividers disappear to completely hidden or barely noticeable. Similarly, other links will have the same effect for "class2" or "class3", etc. There should also be a way to get them back. If anyone has an idea for something that does this, I would appreciate it in that direction.

Answer 1

Very easy to do 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 will look like this:

<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 2

This is the 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 providing an all divcommon class, for example common-classin addition to class1. So you can:

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

This will allow you to write something simple:

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

And restore everything:

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

Answer 3

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

See the jQuery documentation for more details . With fadeIn () you can get them back.

Answer 4

jquery already does the following:

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