IF statement only works two to three times

[Samzee]

I'm trying to make this page working that has a vertical line of pictures (thumbnail-sized) which you can then click on to make them scroll to full width and show lots of text and happy stuff. I've already managed to do all that. However, if I click on one thumbnail, any open thumbnails are supposed to close. I've implemented an IF statement and class-checking for that:

    $("a#shins-rec1").clickToggle( function(){        if ($(".shins-rec").hasClass('done')) {            $(".shins-rec").filter($(".done").not($(this))).animate({                left: $(".shins-rec").filter($(".done").not($(this))).width() / 2 - 60,                width: '120px'            }, 250, function(){               $(this).removeClass('done');             });        } else {            $(this).parent().animate({                left: 0, width:'100%'            }, 250, function(){               $(this).addClass('done')            });        };    }, function(){        $(this).parent().animate({             left: $(this).parent().width() / 2 - 60,             width: '120px'         }, 250, function(){            $(this).removeClass('done')        }); // even clicks    });

which works all fine, but after you clicked two or three times on different thumbnails to open them and close the other ones, the already open thumbnail gets stuck and the clicked thumbnail opens as it should open. You have to click on the clicked thumbnail to close the other one, and then you have to wait some time till you can click the clicked thumbnail to properly close it again. After that it just stays like this.

I've already tried doing it with a plugin called Summer of GOTO, because I think it has something to do with checking whether there are any "done" classes or not, so I wanted to make it re-check stuff using goto in JQuery. Using a WHILE statement didn't work either, but that could be because I don't understand that function.I tried adding .stop() before the .animate statement, but that didn't do anything special as well.

Anyone knows how to solve this?

 

Thanks in advance.

 

Here is a JSfiddle of what I'm working on.

[Hadien]

I looked at your jquery code, and a lot of it is repetitive. you don't need to define a clickToggle function. and you don't need to individually map an onclick to each and every a tag like you did. You've created far too many unique possible states in that code that I didn't even try to bother with what exactly is going wrong. I simply rewrote it using far less code.

 

take a look at this update

 

the simple thing to do is to first run the "deselect" animation on everything (even if they are already deselected, even on the element that you DID select). and then go back and run the "select" animation on the clicked one. regardless of the combination of clicks, the code just has 2 simple rules to follow then. I changed the settings too by setting queue to false, so that all animations (both deselect and select) run at the same time.

 

 

 

[Samzee]

""

 

I think you did right on just rewriting it, I was already aware of the mess I made of my code . But this solution looks very interesting, although the thumbnail doesn't go back when you click on the clicked thumbnail, it only moves when you click on another non-clicked thumbnail.

Anyway, due to some sort of problem I didn't get any mails about getting a reaction to my topic (is there something I need to set up first for that?), and I noticed your reply far too late. In the meantime I've already gotten an answer on another forum, from a person who also rewrote my code by the looks of it and that one solves the problem stated earlier in this post too.

 

Here is the JSfiddle if you're interested.

 

Thanks for helping!