Question

I have a few links, which should toggle their corresponding div like this…

    $('#link a').click(function() {
        $('#open').animate({width: 'toggle'});
      });

    $('#link2 a').click(function() {
        $('#open2').animate({width: 'toggle'});
      });

    $('#link3 a').click(function() {
        $('#open3').animate({width: 'toggle'});
      });

Problem is if you click #link, then click #link2, BOTH boxes stay open.

All the ‘#open’ divs share the same class, so I have used

$('#link1 a').click(function() {
        $('shared-class').hide();
        $('#open1').animate({width: 'toggle'});
      });

Which does work, tho it looks very crude as hide does not slide in, If I used a toggle on the class, it mixes up the order of what comes out, and what syas in, I am not sure if there is just a way to slide an element in IF IT IS OUT, hope this makes sense, much apreciated for any help!

EDIT

http://jsfiddle.net/PEfHc/

Basicly if I click 1, all others should not show

Answer 1

There surely are easier ways to do this sort of thing, but anyway:

$('a', '[id^="link"]').click(function(e) {
    e.preventDefault();
    var elm = $('#open'+$(e.target).parent().attr('id').replace('link', ''));
    $('[id^="open"]').not(elm).filter(':visible').animate({width: 'toggle'}, 1000);
    elm.animate({width: 'toggle'}, 1000);
});​

FIDDLE