CODEWITHSUNDEEP
javascriptjqueryhtml
tdc
tdc

Reputation: 5464

hide all class members that aren't a child of (this) element?

I have several elements on a page all structured like the following:

<div>
    <button>
    <table id="table1" class='tableClass'>
        misc child elements
    </table>
</div>

This is repeated 6 times.

When the <button> is clicked, I want to toggle the visibility of #table1, as well as hide ALL .tableClass'es that are NOT #table1

--

This is what I have so far, which is fired when the <button> is clicked..

$('.tableClass').not(this.children()).fadeOut();

The problem is I need to access the appropriate .tableClass. The this.children() line isn't what I want since I know the table is not a child of the button, but I can't think of a straightforward way.

I know this is pretty straight forward but I'm sleep deprived and haven't had my coffee :)

Upvotes: 0

Views: 48

Answers (2)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

Try this :

var table = $(this).closest('div').find('.tableClass').fadeIn();
$('.tableClass').not(table).fadeOut();

Upvotes: 0

Todd
Todd

Reputation: 1674

Saw the other answers but here's another approach:

$('button').on('click', function() {
    $('#table1').toggle();
    $('.tableClass[id != "table1"]').fadeOut();
});

Upvotes: 1

Related Questions