ouvrir une div à partir d'une autre div

[chougadosu]

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

[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…

[chougadosu]

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.

[Watilin]

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

[chougadosu]

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

[javatwister]

une chatte n'y retrouverait pas ses ptits, comme disait ma grand-mère;

[chougadosu]

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

[NoSmoking]

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 ????

[Ceddoc]

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à.