texte qui apparaît/disparaît au clic

**marion5515** · 05/06/2008, 15h45

Bonjour à tous !

J'ai un petit souci avec mon code qui ne veut pas fonctionner. Voila la situation. Sur une page d'un site, je dois consulter une base de données qui contient tous les articles de new de l'entreprise. Sur cette page je souhaite afficher tous ces articles avec une petite particularité : je n'affiche que le titre la date et la catégorie de l'article et je souhaiterais qu'en cliquant sur unlien le contenu de l'article apparaisse ou disparaisse en dessous de son titre.Rien de bien méchant, j'ai trouvé des codes sur internet mais aucun ne fonctionne chez moi !! Voilà le dernier code trouvé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
function showid(idelem){ 
	if(document.getElementById(idelem).style.display=='none') 
		document.getElementById(idelem).style.display='block'; 
	else document.getElementById(idelem).style.display='none'; 
}
</script>

et là j'appelle cette fonction dans mon affichage(code html/php) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$query='SELECT numArticle, date, DAYOFMONTH(date) AS jour, MONTH(date) AS mois, YEAR(date) AS annee, titre, contenu, image, categorie FROM articles order by jour, mois, annee ';
$res=mysql_query($query);
$affiche='<div class="corpstexte">';
while($row=mysql_fetch_array($res)){
	$affiche.='<div id="article">
	<p><font style="font-weight : bold; font-size : 14pt;"> '.$row[5].'</font> - 
	<font style="font-weight : bold; font-size:13pt;"> '.$row[1].'	</font> - 
	<font style="font-weight : bold; color : #084b9d ;"> '.$row[8].'	</font></p>
	<p onclick="javascript:showid("showhide")" style="cursor: pointer">cliquer ici pour cacher/montrer le texte</p>
	<div id="showhide" style="display:block">
		<p>'.nl2br($row[6]).'</p>';
		if($row[7]!=null)
$affiche.='<p><center><img src="'.$row[7].'"></center></p>';
 
		$affiche.='</p><hr/><br/>
	</div>';
}
echo $affiche;

Mais lorsque je clique sur le pseudo lien cliquer ici pour cacher/montrer le texte, rien ne se passe !

**SpaceFrog** · 05/06/2008, 15h51

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script type="text/javascript">
function showid(idelem){ 
	if(document.getElementById(idelem).style.display=='none') {
		document.getElementById(idelem).style.display='block'; }
	else {document.getElementById(idelem).style.display='none'; }
}
</script>

**marion5515** · 05/06/2008, 16h06

absolument aucune réaction !! Mais c'est quand même bizarre car j'ai trouvé cette fonction sur un forum et d'après tout le monde elle fonctionne parfaitement !

**SpaceFrog** · 05/06/2008, 16h08

oui encore faut il que tes éléments aient un id ...

**marion5515** · 05/06/2008, 16h11

bah ils ont un id !! regardez le code j'ai bien mis un id pour le paragraphe que je souhaite faire apparaître/disparaître !

**SpaceFrog** · 05/06/2008, 16h34

j'aurais du insister sur UN ...

Un id doit être unique sur la page
hors si je ne m'abuse ton attribution d'id est dans une boucle php ....
cela ne fonctionnera que si tu as un seul enregistrement

mets un indice et incrémente le pour concatnenr les id

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 
$indice=0
while(...) {
 
 '       .id="article_'.$indice.'"'   ....'
$indice++;

**marion5515** · 05/06/2008, 16h44

ah ok ! autant pour moi !! bon bah j'ai fait les changements suivants mais sans succés :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
$i=0;
 
while($row=mysql_fetch_array($res)){
     $affiche.='<div id="article">
	<p><font style="font-weight : bold; font-size : 14pt;"> '.$row[5].'</font> - 
	<font style="font-weight : bold; font-size:13pt;"> '.$row[1].'	</font> - 
	<font style="font-weight : bold; color : #084b9d ;"> '.$row[8].'	</font></p>
	<p onClick="showid("article_'.$i.'")" style="cursor:pointer;">cliquer ici pour cacher/montrer le texte</p>
	<div id="article_'.$i.'" style="display:none;">								<p>'.nl2br($row[6]).'</p>';
	if($row[7]!=null)									             $affiche.='<p><center><img src="'.$row[7].'"></center></p>';
										 $affiche.='</div><hr/><br/>
</div>';
 
$i++;
}

**tusssss** · 05/06/2008, 16h48

tu as encore un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

div id =article

dans une boucle...

**E.Bzz** · 05/06/2008, 16h58

Et puis la syntaxe PHP n'est pas bonne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onClick="showid("article_'.$i.'")"

Il faut mettre des simples quottes (protégées) ici !

A+

**marion5515** · 05/06/2008, 17h06

bah le div id="article" au début de la boucle sert juste à appliquer certaines propriétés d'affichage avec ma feuille de style ! mais par précaution je l'ai enlevé ! Sinon pour l'histoire des guillemets simples ou doubles j'avais effectivement remarqué ce détail mais vu que je suis en langage php qui affiche un texte html quand je mets deux cotes simples à la suite ça me met une erreur ! c'est pour cela que j'avais mis des guillemets !

**SpaceFrog** · 05/06/2008, 17h06

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="showid(\'article_'.$i.'\')"

**marion5515** · 05/06/2008, 17h14

toujours pas de changement ! j'ai mis un alert dans la fonction est rien ne s'affiche donc l'appel à la fonction ne se fait même pas ! je comprends pas!

**E.Bzz** · 05/06/2008, 17h16

Tu pourrais poster le code généré (celui récupéré dans le nav en faisant afficher le code source de la page) ?
J'ai l'impression que le php masque des problèmes ...

A+

**marion5515** · 05/06/2008, 17h25

voici la partie du code source qui nous intéresse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<p><font style="font-weight : bold; font-size : 14pt;"> SEPAREX's new web site is online</font> - 
										<font style="font-weight : bold; font-size:13pt;"> 2008-06-09	</font> - 
										<font style="font-weight : bold; color : #084b9d ;"> News	</font></p>
 
 
										<p onClick = "showid('article_0')" style="cursor:pointer;">cliquer ici pour cacher/montrer le texte</p>
										<div id="article_0" style="display:none">
											<p>SEPAREX's new web site is finally online. <br />
The content was structured so as to accurately present our activity which is now focused on three main areas : pharmaceutical technology, process development for various SCF processes and high-pressure equipment design and construction. <br />
We have tried to design it as an interactive web site, with several brochures and articles to download, and a secured individual access where each registered customer will be able to download tailored files.<br />
 <br />
This site will be improved so as to meet our customer's needs. Don't forget to let us know your comments regarding this new web site!</p>
											</div><hr/><br/>
 
										</div><div id="art">
										<p><font style="font-weight : bold; font-size : 14pt;"> CONTROLLED DELIVERY SYSTEMS USING SUPERCRITICAL FLUID TECHNOLOGY - OEIRAS (Portugal)</font> - 
										<font style="font-weight : bold; font-size:13pt;"> 2008-06-16	</font> - 
										<font style="font-weight : bold; color : #084b9d ;"> Events	</font></p>
 
										<p onClick = "showid('article_1')" style="cursor:pointer;">cliquer ici pour cacher/montrer le texte</p>
 
										<div id="article_1" style="display:none">
											<p>Come and talk to us about your needs and challenges.<br />
For more information, click <a href="http://www.ibet.pt/calendario/?day=16&month=6&year=2008&tipo=d">here</a></p>
											<p><center><img src="./images/BDD/events16thJune2008.jpg"></center></p></div><hr/><br/>

**E.Bzz** · 05/06/2008, 17h41

Sous IE6 et Firefox 2 ça fonctionne très bien

A+

**marion5515** · 05/06/2008, 17h48

sérieux ?!

bah chez moi ca ne fonctionne pas !!!

**FrankOVD** · 05/06/2008, 22h13

Je te conseille de l'essayer sur un autre poste ou sur un autre navigateur afin de voir si le problème ne serait pas le "chez toi" plutôt que le code. Il se pourrait qu'il y a quelque chose de pas standard à quelque part dans ton navigateur... sous toute réserve.

**marion5515** · 06/06/2008, 08h56

J'ai essayé sur mon ordinateur perso chez moi mais cela ne fonctionne pas mieux ! Ni sous IE ni sous Firefox !! Je ne comprends vraiment pas !! j'ai recherché des scripts sur internet c'est toujours la même chose avec l'attribut display ou visibility mais rien ne marche dans ma page !! je commence vraiment à me demander si il n'y a pas un souci avec le fait que je travaille avec du php et ma base de données ! Ce que je n'arrive pas à comprendre c'est que l'appel à la fonction ne marche pas ! J'ai mis des alert dedans et je n'ai jamais rien ! Par contre lorsque je teste sous IE il me met erreur sur la page en bas et l'erreur c'est sur la ligne d'appel à la fonction avec onClick, il met "objet attendu" alors que tout est bien écrit j'ai vérifié !

**E.Bzz** · 06/06/2008, 09h27

Envoyé par marion5515

je commence vraiment à me demander si il n'y a pas un souci avec le fait que je travaille avec du php et ma base de données !

Non non : ça n'a rien à voir ...

Tu as vérifié que Javascript était activé ?

A+

**marion5515** · 06/06/2008, 09h43

oui oui javascript est activé !! j'ai des amis qui s'y connaissent plus que moi qui m'ont donné un site internet qui a résolu mon problème ! j'ai implanter plusieurs scripts donnés, ajoutés une ligne de code et pour mon plus grand plaisir et soulagement, tout fonctionne magnifiquement !!! je vous le conseille !!

http://github.com/madrobby/scriptacu...fect-slidedown

Merci à tous pour votre aide, même si ça ne me dit pas pourquoi mon code ne fonctionnait pas le principal est que j'obtienne ce que je voulais ! Je reviendrais peut-être plus tard sur le sujet quand j'aurais le temps pour comprendre ce qui ne va pas !

texte qui apparaît/disparaît au clic

JavaScript

Discussions similaires

Partager

Partager