click => deplier, click ailleurs => reduire

Bonjour,

J'ai un petit soucis côté javascript.
Je cherche à reproduire en quelque sorte le mur de facebook avec Symfony2.

Mon problème se situe au niveau de la zone de saisie que j'agrandie lorsque l'utilisateur clique dessus.
Je voudrais que lorsqu'il clique ailleurs, la zone se réduise.

Le problème vient du fait que j'ai gérer mes messages dynamiquement et du coup j'ai pas un div spécifique mais potentiellement des centaines de div qui contiennent l'id suivant : "message_id" ou id est le numéro du div sur lequel je clique.

Merci par avance pour votre aide !

???
des id dupliqués ?
un id doit être unique

le souci n'est pas un onclick out .... qui n'existe pas et n'a aucun sens

il faut juste sur tout autre click, reduire ce qui avait été ouvert avant

Non les id sont bien uniques, sauf que je ne connais pas à l'avance l'id du div qu'il va falloir réduire...
l'ID que j'ai mis en gras, contient la clé primaire de mon message.

Edit :
J'ai peut être une idée que je dois tester suite à la lecture du post suivant : http://www.developpez.net/forums/d78...tion-clickout/

Il suffirait sans doute qu'à la place de gérer un booléan, je sauvegarde l'id du div pour savoir lequel réduire, sauf que si je clique sur une autre zone de message, il faudra que je réduise la précédente et que j'agrandisse la nouvelle.

Je vais tester dans ce sens là.

ce genre d'ergonomie est très simple a gérer avec jquery

un selecteur d'id qui commencent par et un autre avec un .is(':visible')

Si en jquery en pseudo (regexp)

Code:

---

1 2 3 4 5 6

$('*[id^=message_id_]').each(function(){ $(this).click(function(){ $(this).is(':visible'); }); });

---

Tu n'a plus qu'a gérer tes événement sur tes div a l'intérieur de each comme j'ai fait pour event onclick avec $(this).

Yes ca marche merci !

Tu devrais surtout leur affecter une classe à tes éléments, ce sera beaucoup plus simple à gérer

Code:

---

1 2 3 4 5 6 7 8 9

$(document).on('click', function(e){ var $this = $(e.target); var $closest = $this.closest('.classeCSS'); if(!$closest.length || $closest.is(':visible').){ $('.classeCSS').slideUp(); return; // early return } $closest.slideDown().siblings('.classeCSS').slideUp(); });

---