How to use "this" and not "this" selectors in jQuery

Posted by tg4FSI on Stack Overflow See other posts from Stack Overflow or by tg4FSI
Published on 2010-03-16T23:47:01Z Indexed on 2010/03/17 0:11 UTC
Read the original article Hit count: 726

Filed under:
|

I have 4 divs with content like below:

<div class="prodNav-Info-Panel">content</div>
<div class="prodNav-Usage-Panel">content</div>
<div class="prodNav-Guarantee-Panel">content</div>
<div class="prodNav-FAQ-Panel">content</div>

And a navigation list like this:

<div id="nav">
<ul id="navigation">
    <li><a class="prodNav-Info" ></a></li>
    <li><a class="prodNav-Usage" ></a></li>
    <li><a class="prodNav-Guarantee"></a></li>
    <li><a class="prodNav-FAQ" ></a></li>
    </ul>
</div>

When the page is first displayed I show all the content by executing this:

$('div.prodNav-Usage-Panel').fadeIn('slow');
$('div.prodNav-Guarantee-Panel').fadeIn('slow');
$('div.prodNav-FAQ-Panel').fadeIn('slow');
$('div.prodNav-Info-Panel').fadeIn('slow');

Now, when you click the navigation list item it reveals the clicked content and hides the others, like this:

    $('.prodNav-Info').click( function() {
        $('div.prodNav-Info-Panel').fadeIn('slow');
        $('div.prodNav-Usage-Panel').fadeOut('slow');
        $('div.prodNav-Guarantee-Panel').fadeOut('slow');
        $('div.prodNav-FAQ-Panel').fadeOut('slow');
    });

So what I have is 4 separate functions because I do not know which content is currently displayed. I know this is inefficient and can be done with a couple of lines of code. It seems like there is a way of saying: when this is clicked, hide the rest.

Can I do this with something like $(this) and $(not this)?

Thanks, Erik

© Stack Overflow or respective owner

Related posts about jquery-selectors

Related posts about this