jquery Réduire et étendre (révéler)

Question

Il y a un certain nombre de boîtes de nouvelles sur une page qui se réduisent et développent le contenu lorsque l'on clique dessus. Semble à son ok, mais une boîte de nouvelles est déjà ouverte, l'utilisateur doit cliquer deux fois sur une autre boîte de nouvelles pour l'agrandir.

S'il vous plaît consulter le lien pour faciliter, http://jsfiddle.net/sameerast/JHgvK/

Answer 1

Vous pouvez réduire votre code à ceci:

$(".fade").click(function() { 
    $(this).next().slideToggle("slow"); 
}); 

Cela lie le gestionnaire d'événements click à tous élément avec la classe .fade, au lieu de se fixer individuellement par id comme vous le faites actuellement. L'utilisation de slideToggle permet de savoir si l'élément est déjà visible ou non pour vous. Vous n'avez donc pas besoin de le maintenir dans une variable.

Le problème avec votre tentative est la variable hidden que vous utilisez pour faire exactement cela. Lorsque vous développez un élément, hidden est défini sur false. Lorsque vous cliquez ensuite sur un autre, hidden est faux, la partie slideUp s'exécute et hidden est définie sur true. Lorsque vous cliquez à nouveau, la branche correcte (else) s'exécute.

Voici un updated working fiddle.

Answer 2

Essayez-le.

http://jsfiddle.net/JHgvK/2/

Je ne sais pas si vous vouliez les autres cases à l'effondrement quand on a cliqué sur la boîte.

Je n'ai pas utilisé slideToggle, au cas où vous vouliez faire quelque chose d'autre pour chaque état