Jquery Div Hide on click

Question

I using coda slider in my page. View it here:

http://www.ndoherty.com/demos/coda-slider/1.1.1/

Each tab causes the pane to shift the content inside it when it is clicked. I want something ELSE to happen on click. When a tab is clicked, I want an image to appear in the topleft section of the page in a div called "#topleft". For the sake of simplicity, lets just focus on this one div, but I will have other divs activated on click as well.

I was thinking of setting the #topleft div to display:none in the CSS, and adding a simple jquery function that sets the #topleft visibility to true when a certain div is clicked. So lets use this for an example: I have a div #nav with 5 divs inside it (each containing their own nav link). When div #nav taba is clicked, I want div #topleft to appear, and when another navlink (say #nav tabb) is clicked I want it to disappear. Can anybody help me out with this fairly simple jquery code? THANKS SOOO MUCH!

Answer 1

Use show() and hide().

Something to the effect of:

$('#someTabLink').click(function() {
    $('#someImage').show();
});

$('#someOtherTabLink').click(function() {
    $('#someImage').hide();
});

or using toggle():

$('#someTabLink').click(function() {
    $('#someImage').toggle();
});

Use the display css property as opposed to visibility, if you want something to be initially hidden when your page loads, as the jQuery show, hide and toggle methods work by manipulating the display css property.

Answer 2

Could you use something like this in jQuery:

  $("element").addClass("ClassName")
  $("element").removeClass("ClassName")

To remove the class that hides it and add the class which reveales it?

Answer 3

To add to karim79's suggestion, you can make multiple tab links hide the #topleft div like this:

$('#tabb, #tabc, #tabd').click( function() {
    $('#topleft').hide();
});