Script pour faire apparaitre et disparaitre une div en cliquant

Premier point : si tu veux que ton script s'applique à plusieurs éléments, il faut effectivement utiliser une classe et non un id dont le principe même est d'être unique.

Pour ce qui est du déroulement, si ce n'est pas fondamental, ou en fonction des navigateurs que tu souhaites supporter, tu peux largement simplifier ton code en utilisant les transitions css3, qui ne seront pas supportées par tous les navigateurs, mais les plus récents le supporteront.

Ensuite, au lieu de display, tu passes par la propriété height, qui sera transitionnée, de façon à ce que la hauteur passe de 0 (caché) à auto (taille normale du bloc).

Un peu de lecture :

* CSS3 transitions http://blogs.msdn.com/b/eternalcoding/archive/2011/11/01/css3-transitions.aspx


Ensuite si tu veux aller plus loin, tu peux penser à améliorer ton script. Il y a plusieurs points qui pèchent.

<a href='javascript: vaEtVient()'>Affiches-moi</a>

Certes ça marche, mais c'est assez dur à maintenir comme code. L'idéal serait d'utiliser une classe et ensuite dans ton script JS d'écouter l'événement click sur tous les éléments qui ont cette classe et appeller ta fonction.

https://developer.mozilla.org/en-US/docs/Web/API/element.onclick

Ensuite, ton code est directement dans ta balise script. En soit ce n'est pas vraiment un problème ici, surtout si tu n'utilises pas de plugins, librairies ou autre, mais en général on évite. Si jamais un autre script venait à déclarer une fonction vaEtVient de la même façon, la mauvaise fonction serait utilisée parce que toutes ces fonctions sont dans le même namespace.

Pour cela tu peux utiliser ce qu'on appelle des closures : http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

C'est faisable mais tellement plus simple avec jQuery. Tu ne veux pas utiliser cette bibliothèque ?

Salut,
Pour l'affichage du div c'est assez simple mais pour l'animation c'est relativement embêtant.
Il faut savoir déjà qu'il n'y a pas de transitions passant d'une hauteur nulle à une hauteur automatique, il faudra donc soit spécifier une hauteur d'affichage fixe (si tu connais la taille des div et qu'elle ne variera pas) soit passer par JS pour donner la taille. Cela dit, tu priveras tous les navigateurs qui ne reconnaissent pas de la propriété transition en CSS, notamment IE9.
C'est plutôt simple une animation en JS pure mais il faudra prendre en compte les styles que tu as appliqué à tes div (bordures, padding...). Perso, si tu n'as que cette animation, je pense que ça sera assez lourd d'utiliser JQuery.
Si non Un exemple simple.

C'est pas grave!
une dernière chose, si j'attribue à la div qui apparait au click un attribut class="contenu" comme ci-dessous :

<a href="#" class="MaClasse">Affiche-moi</a>
<div class="contenu">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl lectus, consequat eget iaculis nec, cursus a metus. In eros massa, tincidunt vel dolor eu, rutrum laoreet nibh. Ut bibendum massa sed consequat ultricies. Duis sed ante quis odio mattis ornare. In vitae quam a est aliquam aliquet non vel purus. Praesent condimentum nibh odio, et condimentum odio interdum ut. Nunc mattis viverra ipsum ut venenatis. Nulla facilisi. Vestibulum rhoncus imperdiet tortor sit amet ultricies. Suspendisse fringilla et neque eu fringilla. Integer eu erat quis purus tincidunt blandit vel eu quam. Aliquam iaculis egestas laoreet. Phasellus commodo accumsan gravida. Nunc cursus laoreet dolor id congue. </div>

qu'est ce que je dois changer dans mon code javascript pour que ca fonctionne??

var a = document.querySelectorAll(".MaClasse");

function hideShow(e){
    (e.preventDefault) ? e.preventDefault() : (e.returnValue = false);
    var cur = e.target || e.srcElement,
        div = (cur.nextSibling.nodeType!==3) ? cur.nextSibling : cur.nextSibling.nextSibling;
	div.style.height = ((div.offsetHeight==0) ? div.scrollHeight : "0") + 'px';
}

for (var i=0, l=a.length; i<l; i++){
    document.addEventListener ? a[i].addEventListener("click", hideShow, false) : a[i].attachEvent("onclick", hideShow);
}

Merci d'avance et après j'arrete de vous embêter![/i][/i]

Dans ce cas le code changerait. Je ne sais pas ce que ça donnerait mais change "nextSibling" par "firstChild"

6l20 a écrit :
Je suis une quiche en JavaScript (entre autre chose ), mais en XHTML 1.0 Transitional, pas de div ni de h1 tu ne mettras dans un lien

Même qu'un lien qui n'est pas un lien et sert juste à déclencher une action JS ne devrait pas être un lien et ça dans n'importe quelle version de (X)HTML.

Faites pété une solution en code, parce que ce ne m'aide pas tellement juste des mots

tshinkiz a écrit :
Faites pété une solution en code, parce que ce ne m'aide pas tellement juste des mots

Avec jQuery : http://codepen.io/jb_gfx/pen/weDHf

C'est propre et net et ça fonctionne dans tous les navigateurs, en 4 lignes de code.
Modifié par jb_gfx (17 Jun 2013 - 19:40)

Je vous aime jb_gfx!

a écrit :
C'est propre et net et ça fonctionne dans tous les navigateurs, en 4 lignes de code.

Plutôt 6004 lignes . C'est sûr que ça marche mais perso, comme je l'ai dit, utiliser JQuery pour cette seule animation me paraît un peu lourd. M'enfin...

jb_gfx, avec le code que tu m'as envoyé, qui m'a considérablement aidé (merci beaucoup), y'a t il une solution pour faire en sorte que la div class="info-panel", une fois ouverte, serve aussi à la refermer en cliquant dessus, et pas seulement avec la div class="toggle-info".

<div class="toggle-info">
	<img src="http://dummyimage.com/100x100/000/fff" title="Lorem Ipsum" />
	<h1>Title</h1>
</div>
			
<div class="info-panel">
	<h2>Texte qui doit apparaitre</h2>
</div>

.toggle-info {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}

.info-panel {
  display: none;
}

$(function() {
  $(".toggle-info").on("click", function() {
    $(this).next(".info-panel").slideToggle(200);
  });
});

J'espere que mon explication est assez claire!
merci beaucoup en tout les cas!

C'est quasi pareil :

http://codepen.io/jb_gfx/pen/weDHf