11550 sujets

JavaScript, DOM et API Web HTML5

Panneau reductible

Bonjour,
Je vous explique mon petit problème:
J'ai une page qui affiche des fiches descriptives sur des produits et je souhaiterais avoir que le nom du produit affiché et quand je clique dessus un panneau s'ouvre vers le bas et affiche le descriptif.
voici mon code:

<tr><td bgcolore=\"#0067A6\"><b>$Nom_produit</b></td></tr>
				<tr><td>Référence: $Id_produit</td></tr>				
				<tr>
				<td  align=\"center\"><img src=\"./../image/images/$Nom_produit/1.jpg\"/></td>
				</tr>
				
			début du panneau réductible
				
				<tr><td></td></tr>
				
				
				<tr><td><b><u>Adresse:</b></u></td></tr>\n
				<tr><td>$Adresse_entrepot
				$Code_postal_
				$Ville</td></tr>
				
				<tr><td></td></tr>
				<tr><td></td></tr>
<tr><td><div id=\"CollapsiblePanel1\" class=\"CollapsiblePanel\">
          <div class=\"CollapsiblePanelTab\" tabindex=\"0\">Déscription:</div>
          <div class=\"CollapsiblePanelContent\">$Descriptif_produit</div>
        </div></td></tr>



mais celui ci ne marche que sur ma première requête, sur les autres produits cela ne marche . que puis je changer? 								

				<tr><td></td></tr>
								<tr><td bgcolor=#FFFFFF></td></tr>
				<tr><td></td></tr>

				<tr><td></td></tr>
				
				
				</tr>\n";


fin de panneau réductible


Si quelqu'un peut m'aider, car la ça fait 15 jours que je m'arrache les cheveux Smiley ohwell
Bonjour sophie13,

Je ne sais pas d'où provient le code que tu as reproduit ci-dessus, mais comme "copier/coller" c'est pas ça Smiley sweatdrop .

L'animation slideToggle() de jQuery devrait te convenir : voir ici, à condition de remanier ton code.
lddsoft a écrit :
Bonjour sophie13,

Je ne sais pas d'où provient le code que tu as reproduit ci-dessus, mais comme &quot;copier/coller&quot; c'est pas ça Smiley sweatdrop .

L'animation slideToggle() de jQuery devrait te convenir : voir ici, à condition de remanier ton code.



Bonjour,

Merci pour le lien je vais allez voir. Le code que j'ai, c'est un spry de dreamweaver et ca marche nickel pour le premier résultat de ma requête mais ne s'étale pas aux autres résultats. je ne comprend pas pourquoi d'ailleurs Smiley ohwell
Smiley ravi
Re bonjour,

J'ai remanier mon code grâce au lien que tu m'as fourni, mais j'ai un léger problème, c'est à dire que ça fonctionne mais lorsque j'ouvre une description cela m'ouvre toutes les descriptions des autres produits.

Je rappel les faits:

je fais une requête dans ma base qui affiche une liste de produit avec leur "description" et je voudrais voir celle ci qu'au moment ou je clic sur "description".

Comme c'est une requête sql je ne peux pas créer un panneau réductible pour chaque résultat.

Smiley decu
Vois un peu ce que tu peux faire avec ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>slideToggle()</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
/*<![CDATA[*/
	span {font-size: 16px; font-weight: bold;}
	a.description:link, a.description:visited {text-decoration: none; margin-left:20px;font-style:italic}
	a.description:hover {background-color:#eaeaea}
	.descrip {width: 300px; background:#eaeaea; padding:10px; display:none; border:1px solid gray;font-size:12px;}
	.dernier {color:orange;background:#000;text-align: justify}
    /*]]>*/
    </style>
  </head>
  <body>
  <div id="content">
	<span>Produit 1</span>
	<a href="#description1" class="description">Description</a>
	<div id="description1" class="descrip">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>
	<br />
	<span>Produit 2</span>
	<a href="#description2" class="description">Description</a>
	<div id="description2" class="descrip">
		<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b>
	</div>
	<br />
	<span>Produit 3</span>
	<a href="#description3" class="description">Description</a>
	<div id="description3" class="descrip dernier">
		<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i>
	</div>
  </div>
	
	<script type="text/javascript">
	//<![CDATA[
		$(document).ready(function(){
			$('.description').click(function(){
				$($(this).attr('href')).slideToggle("slow");
			});
		});
    //]]>
    </script>
  </body>
</html>

Si toutes les descriptions s'ouvrent en même temps, c'est qu'il n'y a rien dans ton code js pour préciser laquelle il faut montrer. Le code ci-dessus permet de faire cette distinction.
Bonjour,

Merci pour ton code, c'est très gentil à toi de te pencher sur mon problème.

Mais celui ci marche super bien dans des pages que tu dois coder toi même hors mes pages se génèrent automatiquement lorsque ma requête sql est faite et donc je me retrouve avec le même problème que le code précédent.

Va falloir que je trouve autre chose Smiley confus

Encore merci
En fait, le code que tu donnes au début n'est qu'une petite partie du code produit par un script dont on ignore tout. Or, c'est dans ce script que doit résider le problème, je crois.

sophie13 a écrit :
Le code que j'ai, c'est un spry de dreamweaver ...

D'après ma petite recherche, il doit s'agir de Spry Collapsible Panel, dont tu trouves un exemple I-C-I.
Il faudrait nous montrer le script qui construit dynamiquement la page qui se sert du Spry de Dreamweaver.
N.B.: je n'ai jamais utilisé Dreamweaver.
Sujet clos
Aller à