Question

I tried this here: http://jsfiddle.net/92HXT/1/ but it does not work.
It only works if I use show("slow")/hide("slow").

Thanks.

Answer 1

While not the sharpest animation, I have enabled it to behave the way I think you’re wanting by finding the parent and hiding all the siblings. I’m not sure yet why this slides the elements out to the left whereas a direct call to .siblings() doesn’t seem to.

Seen here.

As others have mentioned, using classes to identify a group of items is the correct approach instead of by ID.

Update:

While I’m still not sure why siblings() doesn’t find the siblings to the div you’ve found by ID, I’m suspecting it has to do something with the process of showing / hiding or possibly even using the sliding animation. Here is my suggested jQuery/jQueryUI:

$('a.view-list-item').click(function () {
    var divname= this.name;
    $("#"+divname).show("slide", { direction: "left" }, 1000);
    $("#"+divname).parent().siblings(":visible").hide("slide", { direction: "left" }, 1000);
});

Here is the updated version.

Update:

An excellent update to the solution by @jesus.tesh

Update:

A behavior update to the solution by @erwinjulius.
I changed DIVs positioning so it behaves better, allowing user to click on links quickly without breaking the animation.
Added white background and left-padding just for better effect presentation.