ouvrir une div à partir d'une autre div

Version imprimable

Salut à tous,
l'idée est qu'à parir d'un lien d'ouvrir une autre div.
voici mon bout de code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script type="text/javascript">
		function ShowHide(elem,image) {
		 var mon_div = document.getElementById(elem);
		 if(mon_div.style.display == "none"){
 
		  mon_div.style.display = '';
		  image.src = 'moins.png';
		}
		else{
		  mon_div.style.display = "none"; 
		  image.src = 'plus.png';} 
		}
 
 
	</script>

et la partie xslt:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<xsl:variable name="sub_module_index"/>
a href="#" onclick="return false">Folder-Unfolder							
<img>
 <xsl:attribute name="src">C:/Users/cdosunga/Desktop/delta_product/moins.png </xsl:attribute>
<xsl:attribute name="id">image </xsl:attribute> 
 <xsl:attribute name="onclick">javascript:ShowHide('<xsl:copy-of select="$sub_module_index" />'); </xsl:attribute> 
</img></a>   
<div style="display:">
<xsl:attribute name="id">
<xsl:copy-of select="$sub_module_index" />
</xsl:attribute>
<xsl:attribute name="href">javascript:ShowHide('<xsl:copy-of select="$sub_module_index" />_module_name_<xsl:value-of select="position()" />');
</xsl:attribute> 		
<xsl:value-of select="module-name" />
</A>		 
 
<div style="display:none">
<xsl:attribute name="id">
<xsl:copy-of select="$sub_module_index" />_module_name_<xsl:value-of select="position()" />
</xsl:attribute>
</div>
</div>

j'arrive à ouvrir et fermer ma 2ème div en cliquant sur chaque lien mais j'aimerai à partir de ma première div ouvrir directement tous les liens de ma 2ème div et les fermer aussi. Je pense que j'ai été clair, merci pour votre aide

09/06/2011, 19h38
Watilin

Salut,
pourrais-tu nous montrer le code HTML généré ? Ou alors, si tu penses que ton problème concerne ta feuille XSL, va voir dans le forum XML.

Sinon comme ça, je vois deux problèmes potentiels : un attribut onclick qui commence par "javascript:" (ligne 7 dans ton extrait de code), je sais pas si ça marche ; et une balise </A> au milieu de nulle part (ligne 16), mais c'est peut-être juste une erreur de recopie…

Salut watilin,
voici mon code javascript modifié:

Code:

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

et xslt:

Code:

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
27
28
29
 
<xsl:variable name="sub_all_mod_index" />
<button type="button">
<a href="javascript:ShowHide('$sub_all_mod_index');">Folder-Unfolder</a></button> 
<div style="display:none" id="$sub_all_mod_index">
 
<xsl:variable name="sub_module_index" select="position()" />
<A> 
<xsl:attribute name="href">javascript:ShowHide('<xsl:copy-of select="$sub_module_index" />_module_name_<xsl:value-of select="position()" />');
</xsl:attribute> 		 			
<xsl:value-of select="module-name" />
 </A>		 
 
<div style="display:none">
  <xsl:attribute name="id1">
  <xsl:copy-of select="$sub_module_index" />_module_name_<xsl:value-of select="position()" />
  </xsl:attribute>
</div>
<A>
<xsl:attribute name="href">javascript:ShowHide('<xsl:copy-of select="$sub_module_index" />_module_name_<xsl:value-of select="position()" />');
</xsl:attribute> 		 			
<xsl:value-of select="module-name" />
</A>		 		 
  <div style="display:">
  <xsl:attribute name="id2">
  <xsl:copy-of select="$sub_module_index" />_module_name_<xsl:value-of select="position()" />
  </xsl:attribute>
 </div>
</div>

j'ai 3 div, la 2àme et la 3ème sont imbriquées dans la 1ère, j'arrive à ouvrir et fermer ma 2ème div et la 3ème div en cliquant sur chaque lien alors l'idée est que j'aimerai en cliquant à partir de mon bouton de ma 1ère div qu'il ouvre la 2ème div et en recliquant qu'il ouvre la 3ème div. Je pense que j'ai été clair, merci pour votre aide.

10/06/2011, 15h42
Watilin

Moi aussi je pensais avoir été assez clair… Le XSL je m'en fiche, je veux voir le HTML généré !

salut Watilin,
voici le code html généré:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <script type="text/javascript"> function ShowHide(elem) { if(document.getElementById(elem).style.display == "none"){ document.getElementById(elem).style.display = ''; } else{ document.getElementById(elem).style.display = "none"; } } </script> <button type="button"> <a href="javascript:ShowHide('$sub_module_index');">Folder-Unfolder</a></button> <div style="display:none" id="$sub_module_index"> <A name="av-control" href="javascript:ShowHide('1_module_name_1');">av-control</A> <div style="display:none" id="1_module_name_1"> ...... </div> </div> <A name="dvr" href="javascript:ShowHide('2_module_name_2'); ">dvr</A> <div style="display:none" id="2_module_name_2"> ...... </div>
du coup ce que je souhaiterai en cliquant au bouton qu'il affiche d'abord la liste de tous les modules et en recliquant qu'il affiche la liste de tous les modules avec leurs details. Les div qui se trouvent dans ce code html affichent seulement la liste de chaque module. J'ai eu l'idée de créer de 2 blocs de div, l'un affichant seulement la liste de module avec

Code:

<div style="display:" id="...">

et l'autre affichant la liste et le detail de chaque module avec

Code:

<div style="display:none" id="...">

mais le problème je ne sais pas comment faire le if dans le code javascript pour appeler selon le condition l'un ou l'autre bloc. Merci

11/06/2011, 07h10
javatwister

une chatte n'y retrouverait pas ses ptits, comme disait ma grand-mère;
14/06/2011, 11h13
chougadosu

Salut,
je joins aussi le fichier html générer pour que vous ayez un peu l'idée.
14/06/2011, 21h14
NoSmoking

Citation:

Envoyé par chougadosu

Salut,
je joins aussi le fichier html générer pour que vous ayez un peu l'idée.

mais où est le ~~join~~ euh! pardon le fichier ????

J'aurais tendance à dire que pour régler ton problème initial, c'est à dire afficher les divs 2 et 3 en cliquant sur le lien 1 il faut que tu donnes toutes les instructions correspondante.

Il faudrait essayer quelque chose du genre:
Code:

1 2 3 <button type="button"> <a href="javascript:ShowHide('$sub_module_index');ShowHide('1_module_name_1');ShowHide('2_module_name_2');">Folder-Unfolder</a></button> <div style="display:none" id="$sub_module_index">
Je suis vraiment pas sûr de la syntaxe mais c'est quelque chose du genre. Ou alors tu implémente une méthode javascript spéciale pour le bouton 1 qui ne fait qu'afficher les modules 2 et 3 si ils ne le sont pas déjà.