[RÉSOLU] [Jquery] Agrandir et fermer div en cliquant dessus.

Bonjour,

Je cherche un moyen d'agrandir une div, qui de base fait 100px par 100px, à 200px de large, puis en cliquant à nouveau dessus celle ci se referme.
La vrai difficulté, c'est qu'il y'a plusieurs div et que j'en rajoute très souvent, il faudrait donc que le code puisse exécuter l'effet sur n'importe quel div, et que l'on ne puisse agrandir qu'une seule div à la fois.

Exemple

<div class="bloc"><h1>Mon Bloc</h1><p> bla bla</p></div>
<div class="bloc2"><h1>Mon Bloc 2</h1><p> bla bla</p></div>

Lorsque je clique sur Bloc1, le bloc s’agrandit, si je clique sur bloc1 ou bloc2 il referme (rétrécit) automatiquement la div ouverte et agrandit la div sur lequel je viens de cliquer.

Les effets pour agrandir, ça je sais faire (rien de compliqué), mais récupérer des valeurs (id ou class) et donner tel ou tel action en fonction des valeurs d'une div.. c'est là que je coince

Merci de votre aide !
Modifié par paltox (24 Mar 2011 - 13:54)

Bonjour,

Tu trouveras certainement ton bonheur ici : http://www.dhtmlgoodies.com/index.html?whichScript=show_hide_content_slide , et ce, sans jQuery

Cordialement
Modifié par lddsoft (23 Mar 2011 - 14:46)

Ça me parait être une solution très lourde, pour le peu que je souhaite faire.
Le site génère beaucoup de traffic, voilà pourquoi je souhaite passer par jquery, en quelques lignes le tout est bouclé.

Merci merci quand même pour ta réponse

paltox a écrit :
Ça me parait être une solution très lourde, pour le peu que je souhaite faire.
Le site génère beaucoup de traffic, voilà pourquoi je souhaite passer par jquery, en quelques lignes le tout est bouclé.

Euh... jQuery (même la version .min), c'est pas plus léger. Il faut tout de même charger la librairie (plus de 50Ko selon la version) + le code inséré dans le HTML ...

Dieu merci Google se charge d'héberger le fichier Jquery, et il reste dans le cache des utilisateurs

Mais ne nous éparpillons pas, je cherche une solution en Jquery car de tout façon nous utilisons déjà la librairie, autant donc en profiter
Modifié par paltox (23 Mar 2011 - 16:14)

Bonjour

Non testé :

jQuery('a[class^="bloc"]').click(function(){
  jQuery('a[class^="bloc"]').hide(); // A remplacer par ton animation qui rétrécit, cache tous les div dont la classe commence par "bloc"
  jQuery(this).show(); // A remplacer par ton animation qui agrandit, this faisant référence au div cliqué
})

Sous réserve d'avoir compris ton souci.
Certains sélecteurs pourraient être optimisés.

Merci pour la solution ça fonctionne !

(je retiens pour le "this", j'approfondirai le le sujet par moi même)

Ah par contre, aurais tu une idée, pour afficher également un span à l'intérieur de la div ?
exemple : j'agrandit une div, je voudrai afficher le span qui la contient et lorsque je ferme une div (en cliquant sur une autre, ou sur elle même) elle referme aussi les span affichés.

Je sais pas si j'ai été très très claire, merci ^^

paltox a écrit :
Ah par contre, aurais tu une idée, pour afficher également un span à l'intérieur de la div ?

Je ne pense pas comprendre ton problème.
Dans mon exemple les méthodes hide() et show() cachent et montrent la balise div mais aussi ses enfants, automatiquement.
On peut avoir un exemple de ton code HTML ?