JQuery Slidedown function

Question

I am pretty new when it comes to using JQuery. I know that what I want to do is very basic.

Basically, I need to create a "caption" box that slides down when an image is clicked.

User clicks the image, and a tiny caption box slides out the bottom to describe to him/her what he has just clicked.

I have created a tiny image to further clarify what I need to do.

Answer 1

You should check TheNewBoston is a channel on youtube telling you how to use jQuery even from scratch.

Here is an example. I think this could help you.

$(document).ready(function() {

    $('.box-img').click(function() {
        $('.box-caption').slideDown('slow');
    });

});

CSS:

.box-img {
    width: 100px;
    height: 100px;
    border: thin solid gray;
    position: relative;
}

.box-caption {
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: 0px;
    background-color: #d4d4d4;
    display: none;
}

HTML:

<div class="box-img">
    my image

    <div class="box-caption">my caption</div>
</div>

Answer 2

http://api.jquery.com/slideDown/ here you can see some samples, it is pretty easy really:

$('#ImageID').click(function() {
    $('#captionboxID').slideDown('slow');
});