Question

I have a table with many columns, some of which have divs which are hidden by default. After clicking on that particular cell, I am making those divs appear by using jquery’s fadeIn effect. Now I want a functionality, where, when I click on cell of some other row, I want all other opened divs to get closed except the ones on that row which I am clicking.
I tried to check display property of opened divs but I am getting display property as undefined. Any suggestions how to go on about this ?

Answer 1

I think what you’re after is this:

$(document).ready(function() {
    $("table tr td").click(function() {
        var clicked = $(this);
        var row = clicked.parent("tr");
        var table = row.parent("tbody").parent("table");
        table.find("td").not(row.find("td")).each(function() {
            $(this).find("div").fadeOut("slow");
        });
        clicked.find("div").fadeIn("slow");
    });
});

When clicking certain cell, it will fade out the <div> in all the cells that are not in the same row as the clicked cell.

Live test case.