How can I fade in text with toggle when clicking on an image?

Question

I would like to fade in and out text when clicking on an image. I'm pretty new to JS, so thank you for answering my question!

Here's my jsfiddle: http://jsfiddle.net/gSVfV/

Here's what I have for JS:

$(function() {
    $('.block img.info').click(function(e) {
        e.preventDefault();
        $('.caption-background').toggleClass('hidden');
    });
});

For HTML:

<div class="block">
<img class="info"/>
<div class="caption-background">
    Hello
</div>

And for css:

 .info {
    width: 200px;
    height: 100px;
    background-image: 
url("http://ocean.nationalgeographic.com/u/TvyamNb-
BivtNwpvn7Sct0VFDulyAfA9wBcU0gVHVnqC5ghqXjggeitqtJ-
1ZIZ1rmCgor42TXOteIQU/");
}
.caption-background {
    height: 200px;
}
.hidden {
    display: none;
}

Answer 1

You can use the jQuery fadeToggle method.

Update your javascript with the following:

$(function() {
    $('.rsABlock img.info').click(function(e) {
        e.preventDefault();
        $('.caption-background').fadeToggle();
    });
});

Check out http://api.jquery.com/fadetoggle/