horizontale Accordéon - essayer d'utiliser .toggle et .animate

Question

Pardonnez-moi si cela est une façon inélégante d'aller à ce sujet mais je suis encore à apprendre jQuery et je suis suivant un chemin de pensée ici ...

Alors J'ai commencé à essayer de construire un accordéon horizontal en utilisant .toggle et .animate. Techniquement, ça marche ... mais avec un défaut ennuyeux. Voici le scénario:

Si je clique sur une case pour l'agrandir, puis la réduire en cliquant sur une autre case, la première case que j'ai développée nécessitera deux clics pour se développer à nouveau.

Par exemple:

1. cliquez box1 pour le développer
2. cliquez box2 pour développer box2 tout effondrement box1
3. box1 exigera maintenant deux clics pour développer à nouveau

Voici le jsFiddle : http://jsfiddle.net/banjodrill/rEPnq/10/

Je suppose qu'il y a un défaut fondamental dans la façon dont j'approche cela. Si quelqu'un a le temps, je serais reconnaissant si vous pouviez jeter un coup d'oeil et m'aider à comprendre ce que je fais mal.

Est-ce lié au fait que j'utilise des instructions if dans les fonctions de bascule?

Merci beaucoup

Answer 1

Vous pourriez vouloir regarder ceci: jquery_ui_accordion

jQueryUI a des choses par défaut pour cela;)