jQuery slideToggle with multiple divs

Question

I'm trying to slideToggle with multiple divs, but I can't seem to get it to work.

I've gotten the basic functionality of what I want in a 2 div layout:

http://jsfiddle.net/q6smW/

$(".replication").slideUp(500,function(){
    $(".duplication").slideToggle(500)
});

But I need it to work with 3 or 4 divs instead of just 2.

I almost feel like the code should be similar to this:

$(".replication").slideUp(500, function($(".duplication").slideUp(500,function()){    
     $(".thirdclass").slideToggle(500)
});

Any help is appreciated.

Answer 1

I suggest wrapping your image divs in a container, and doing the same to your info divs. Either you use the same container or two separate--up to you. Then use when an image div is clicked, hide all your info divs, and show only the corresponding info div, by way of using the index of div relative to the container. You can use jQuery's index() function. It also simplifies your code.