Switch between Fade in and Fade out on click

Question

I want to use jQuery to fade in a div when an image is clicked, when the image is clicked again, I want it to hide and so on.

How would I do this?

I basically need a toggle switch.

Answer 1

$('#my_img_selector').click(function(){$('#my_div_selector').fadeToggle()});

Try it out here .

Try also slideToggle() and toggle() in place of fadeToggle() .

Answer 2

You have to change the selectors $('#fadeMe') and $('#bindImage') according to your markup. The magic is here

$(document).ready(function(){
    $('#bindImage').on('click', function(){
        $('#fadeMe').fadeToggle();
        //return false; // only useful if you trigger an <a href="#"></a>
    });
});

Answer 3

$('#yourimage').on('click', function(event){
 if ($("#something").is(':visible')) {
 $(".something").hide("drop", {
    direction: "up"
  }, 2000);
}else{
  $(".something").show("drop", {
    direction: "up"
  }, 2000);
}
});