Question

I have a script that works on one link on jsfiddle.

I have two links. Link one is “Link one” the other one is “Link two” you can see the code on jsfiddle = http://jsfiddle.net/lamberta/7qGEJ/4/

It works to show and hide but i cant make it show one and other. It shows everything.

If i press Link one I want to show “.open-container-One”
And if I press Link two i just want to show “open-container-Two”

Hope you understand my issue.

jsCode:

$(document).ready(function() {
    var $div = $('.test');
    var height = $div.height();
    $div.hide().css({
        height: 0
    });

    $('a').click(function() {
        if ($div.is(':visible')) {
            $div.animate({
                height: 0
            }, {
                duration: 500,
                complete: function() {
                    $div.hide();
                }
            });
        } else {
            $div.show().animate({
                height: height
            }, {
                duration: 500
            });
        }

        return false;
    });
});​

Answer 1

Although I like @adeneo’s answer, I prefer this method using selectors rather than elements :

$(".test").hide();
$('.list a').each(function(i) {
    $(this).on("click", function() {
        $(".test").slideUp(0).eq(i).slideDown(400, function() {
            $(".close a").on("click", function() {
                $(".test").slideUp();
            }); // on click close
        }); // after slideDown (shown div)
    }); // on click link
}); // each 

The only condition is that there should be the same number of links (list items) as the number of div to be shown and in the same order.

See JSFIDDLE