masquer/afficher un div avec + ou -

**chougadosu** · 06/06/2011, 16h05

Salut à tous,
j'ai un petit soucis dans cette optique, j'utilise javascript pour masquer/afficher les contenus de ma liste mais je voulais ajouter un bouton qui change en + 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 javascript combiné à 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" xmlnssl="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.

**Finality** · 06/06/2011, 17h03

Salut,

en HTML :

Code :

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

1
2
 
<a href="javascript:ShowHide('$sub_all_mod_index');"><img src="button_hide.png" id="button" /></a></button>

En JS :

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
 
function ShowHide(elem) 
{
 
   if(document.getElementById(elem).style.display == "none")
   {
      document.getElementById(elem).style.display = '';
      document.getElementById('test').src = 'button_hide.png';
   }
 
   else
   {
      document.getElementById(elem).style.display = "none";
      document.getElementById('test').src = 'button_show.png'; 
   } 
 
}

Bien sûr, il faut adapter l'adresse de l'image à ton site

**chougadosu** · 06/06/2011, 18h27

merci Finality pour ton intervention,
j'allais t'informer que mon html est généré par la transformation xslt du coup

Code :

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

<a href="javascript:ShowHide('$sub_all_mod_index');"><img src="button_hide.png" id="button" /></a></button>

doit être généré par la transformation xslt. Je crois qu'il me faut un bout de code js qui permettra en cliquant le bouton "-" pour afficher et en recliquant sur le même bouton "+" pour masquer c'est ça idée mais je suis débutant en Js c'est pour cela je demande à l'aide.

**andry.aime** · 07/06/2011, 07h52

Bonjour,

C'est ce que fait le code de Finality.
Sinon

Code :

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

1
2
3
document.getElementById('button').src = 'button_hide.png';
...
document.getElementById('button').src = 'button_show.png';

A+.

**chougadosu** · 08/06/2011, 01h01

Salut,

J'ai modifié mon code mais rien ne marche en cliquant sur le - pour masquer ça masque mais ça ne change pas en +:

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
 
<script type="text/javascript">
		function ShowHide(elem,image) {
		 var mon_div = document.getElementById(elem);
		 if(document.getElementById(elem).style.display == "none"){
 
		  mon_div.style.display = '';
		  image.src = 'moins.png';
		}
		else{
		  mon_div.style.display = "none"; 
		  image.src = 'plus.png';} 
		}
 
 
	</script>

et pour la transformation xslt:

Code :

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

1
2
3
4
5
6
7
 
<button type="button">
<a href="javascript:ShowHide('$sub_all_mod_index');">
<img src="C:/User/plus.png" id="image" onclick="ShowHide('iddiv',this.id)"/>  </a> </button>
<div style="display:" id="$sub_all_mod_index">
.....
</div>

**andry.aime** · 08/06/2011, 07h34

Re,

Tu appelles la fonction différemment.
Tu confond l'id d'un élément avec l'élément.
Tu utilises un chemin absolue.
...

Code :

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

1
2
3
<a href="#">
<img src="C:/User/plus.png" id="image" onclick="ShowHide('$sub_all_mod_index',this)"/>  </a> </button>
<div style="display:" id="$sub_all_mod_index">

A+.

masquer/afficher un div avec + ou -

JavaScript

Vue hybride

Discussions similaires

Partager

Partager