Afficher/Cacher du texte via un click

Bonjour à tous!!

J'ai pas touché à js depuis un petit moment, et je tombe sur un problême qui, je pense m'aurait paru simplissime il y a quelque temps...

J'ai dans ma page des div comme ceci :

Code:

---

1 2	<div class="message" onlick="display()"><p> titre </p><p> corps du message</p></div>

---

J'ai dans ma feuille de style :

Code:

---

1 2 3 4

.message:nth-child(2){ display : none; }

---

Je souhaite donc avoir une fonction javascript qui, lorsque je clique sur ma div, affiche le "corps du message". J'ai donc fait ceci :

Code:

---

1 2 3 4 5 6 7 8 9

function display(){ var msg=this.childNodes[1]; if(msg.style.display == 'none'){ msg.style.display='block'; }else{ msg.style.display='none'; } }

---

Et ce code n'a strictement aucun effet!
S'il vous plait, quelqu'un peut il m'expliquer pourquoi, et m'aider à résoudre mon problème?

Merci beaucoup en tout cas.

Le problème doit venir de ma manière de modifier les css...
Puis que si je mets :

Code:

---

1 2 3 4

function display(){ alert("coucou"); }

---

Ca fontionne, mais si par exemple je fais :

Code:

---

1 2 3 4

function display(){ this.style.color='red'; }

---

une fois encore rien ne se passe...
help :cry:

Bonjour,
plusieurs erreurs se sont glissées dans ton code

<div class="message" onclick="display()">

ensuite dans ta fonction display, pas très heureux comme nom de fonction d'ailleurs, le this est en fait l'objet window, dans ton cas il te faut passer en paramètre l'objet cliqué, le this

Code:

---

<div class="message" onclick="displayMsg(this)">

---

et dans ta fonction utiliser celui ci

Code:

---

1 2 3 4 5 6 7 8

function displayMsg( obj){ var msg=obj.childNodes[1]; if(msg.style.display == 'none'){ msg.style.display='block'; }else{ msg.style.display='none'; } }

---

Bonsoir, et merci de votre réponse!

Alors, désolé pour le c manquant sur "onclick" c'est parce que j'ai recopié à la main... Mais il était bien présent dans mon code.

Je me permets de poster la <div> à modifier dans mon code :

Code:

---

1 2 3 4 5

<div class=message onClick="displayMsg(this)"><p><?php echo '<a href="'.$url.'recherche.php?pseudo='.$msg[1].'">'.$msg[1].'</a>                 -  '.date('d/m/y h:i:s', strtotime($date));?></p> <?php echo '<p>'.$msg[0].'</p>'; ?> </div>

---

Je souhaite donc que la partie "<?php echo '<p>'.$msg[0].'</p>'; ?>", n'apparaisse que lorsque je clique sur la <div> de class "message"...

J'ai donc la fonction javascript suivante :

Code:

---

1 2 3 4 5 6 7 8 9 10

function displayMsg(obj) { var msg=obj.childNodes[1]; if(msg.style.display == 'none'){ msg.style.display='block'; }else{ msg.style.display='none'; } }

---

... Mais toujours rien ne se passe.
Je suis sur ce site depuis 8h du matin! Ca devient dur :lol:

merci de votre aide!

normal, il y a une subtilité...;) ce ne serait pas marrant sans

comme tu généres ton code via PHP inséres directement dans la balise P style="display:none"

Code:

---

<?php echo '<p style="display:none">'.$msg[0].'</p>'; ?>

---

Merci encore de t'occuper de moi ^^

J'ai donc cette fois :

Code:

---

1 2 3 4 5

<div class=message onClick="displayMsg(this)"><p><?php echo '<a href="'.$url.'recherche.php?pseudo='.$msg[1].'">'.$msg[1].'</a> -  '.date('d/m/y h:i:s', strtotime($date));?></p> <?php echo '<p style="display:none">'.$msg[0].'</p>'; ?> </div>

---

et

Code:

---

1 2 3 4 5 6 7 8 9 10

function displayMsg(obj) { var msg=obj.childNodes[1]; if(msg.style.display == 'none'){ msg.style.display='block'; }else{ msg.style.display='none'; } }

---

... Et toujours rien.
Je comprends vraiment pas...

Citation:

---

... Et toujours rien.
Je comprends vraiment pas...

---

maintenant observes la construction de ton document,

<P><A>....</A></P><P>...</P>

mais ce n'est pas ce que voit les navigateurs, cela doit marcher sous IE mais pas sous FireFox qui voit ton document comme cela

<P><A>....</A></P>#text
<P>...</P>

ou pas loin.

La solution est que tu obtiennes ton code sur la même ligne, sans retour à la ligne pour ne pas avoir des #text sous FireFox

Autre solution est le changement de récupération de l'élément à masquer/afficher

Code:

---

1 2 3 4 5 6 7 8 9

function displayMsg( obj){ // var msg=obj.childNodes[1]; var msg=obj.getElementsByTagName('P')[1]; // récup. du 2éme P if(msg.style.display == 'none'){ msg.style.display='block'; }else{ msg.style.display='none'; } }

---

Bon sang!
Je m'en veux de ne pas avoir essayé de suite avec "get ElementsByTagName"...
Mais j'avais pas fait de JS depuis si longtemps.

Merci mille fois!
"Vous m'enlevez une fière chandelle du pied!"