Question

I want by clicking the image(represented by the cross box), a rectangle area will be expanded downward to display information(kind of toggle). How can I do that. Thanks.

when I click another image, I also want the first rectangle area will retract and the next will expand(i.e. only one rectangle area a time)

I want the similar effect here: themetrust.com/demos/reveal/#footloose , but what I really want is that the grey area to put under each row of the photos and probably expecting ajax and rails implementation.

Answer 1

You haven’t given much information, but one strategy you could use is to associate each clickable img with a container that will show or hide:

<div id="images">
    <img src="img_src" data-target="#content1" />
    <img src="img_src" data-target="#content2" />
    <img src="imgs_src" data-target="#content3" />
</div>
<div id="contents">
    <div id="content1" class="active">Content1</div>
    <div id="content2">Content2</div>
    <div id="content3">Content3</div>
</div>

Then you could wire up an event handler for each image, retrieve the content and show it:

$("#images img").on("click", function () {
    var content = $(this).data("target");
    $("#contents .active").hide("slow", function () {
        $(this).removeClass("active");
        $(content).show("slow", function () {
            $(this).addClass("active");
        });
    });
});

Also toggling an active class along the way.

Example: http://jsfiddle.net/k8zCU/

You might want to check out the following documentation for more effects you could use:

• show
• fadeIn
• slideUp
• animate