show/hide div with slide left\right animation

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.

Answer 2

However, this codes works, the name tag in elements is obsolete to W3C standards.

I tried with ID's does not work, then I changed the name tag to the title and this works too and you comply with W3C standards!

So change "name" to "title" like this, it functions great, sees here: http://design65grafischontwerp.nl/#portfolio

<script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var divtitle = this.title;
            $("#" + divtitle).show("slow").siblings().hide(1000);
        });
    });
</script>