masquer/afficher un div avec + ou -

**chougadosu** · 06/06/2011, 11h11

Salut à tous,
j'ai un petit soucis, j'utilise js pour masquer/afficher les contenus de ma liste mais je voulais ajouter le + et - genre en cliquant sur le - pour afficher et le + pour masquer comme dans le notepad. pour l'instant j'ai reussi à créer un bouton qui masque/affiche en cliquant sur ce bouton. voici mon code xslt:

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
 
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<html>
<body>
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_all_mod_index');">Folder-Unfolder</a></button> 
<div style="display:" id="$sub_all_mod_index">
<!-- ma liste-->
</div>
</body>
</html>
</xsl:stylesheet>

du cooup l'idée est qu'il y a affichage le bouton apparait "-" et en recliquant pour masquer le bouton devient "+".
Merci pour votre aide.

**thelvin** · 06/06/2011, 11h18

Ça c'est une question de JavaScript, pas de XSLT.

**chougadosu** · 06/06/2011, 14h22

Salut Thelvin, merci pour ton intervention
en effet je sais qu'il me fait un bout de code js pour ça le soucis est que je suis un peu débutant en javascript du coup si tu pourras me donner une idée pour le faire cela m'aidera beaucoup.

**zuzudesbois** · 07/06/2011, 12h08

J'ai un bout de code qui me fait ca le voila

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
<script language="javascript">
					<xsl:comment>
						function toggle(id) {
						var ele = document.getElementById(id +
						".toggleText");
						var text = document.getElementById(id +
						".displayText");
						if(ele.className == "toggleShow") {
						ele.className =
						"toggleHide";
						text.innerHTML = "+";
						} else {
						ele.className =
						"toggleShow";
						text.innerHTML = "-";
						}
						}
					</xsl:comment>
				</script>

et dans le xsl :

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
<xsl:variable name="id" select="concat('toc.', @id)" />
		<xsl:variable name="class" select="concat('tocLevel',@level)" />
		<xsl:variable name="displayTextId" select="concat($id, '.displayText')" />
		<xsl:variable name="toggleTextId" select="concat($id, '.toggleText')" />
		<div>
			<xsl:attribute name="class"><xsl:value-of select="$class" /></xsl:attribute>
			<a class="toggleLink">
				<xsl:attribute name="id"><xsl:value-of select="$displayTextId" /></xsl:attribute>
				<xsl:attribute name="href">javascript:toggle('<xsl:value-of
					select="$id" />');</xsl:attribute>
				<xsl:text>+</xsl:text>
			</a>
 
 
				</div>
		</div>

à toi d'adapté a ton xsl

J'espère que cela va t'aider

masquer/afficher un div avec + ou -

XSL/XSLT/XPATH XML

Discussions similaires

Partager

Partager