masquer/afficher un div avec + ou -

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

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, 18h03

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, 19h27

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, 08h52

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, 02h01

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, 08h34

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

**chougadosu** · 08/06/2011, 12h32

Salut Andry.aime,
j'ai essayé avec

Code :

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

<img src="C:/User/moins.png" id="image" onclick="ShowHide('$sub_all_mod_index',this)"/>

en cliquant sur le bouton il y a aucun changement d'image en + et même il ne trouve plus d'image.
Et remplaçant this par this.id là ça garde l'magine par defaut lorsque je clic sur le bouton.

**andry.aime** · 08/06/2011, 12h53

Envoyé par chougadosu

en cliquant sur le bouton il y a aucun changement d'image en + et même il ne trouve plus d'image.

Envoyé par andry.aime

Tu utilises un chemin absolue.

Parce que l'image et le fichier n'est pas dans le même répertoire, or que tu utilises un chemin relatif pour le changer dans le javascript et un chemin absolue pour le premier image au chargement.

Envoyé par chougadosu

Et remplaçant this par this.id là ça garde l'magine par defaut lorsque je clic sur le bouton.

Parce que t'as d'erreur, et rien ne se passe.

A+.

**chougadosu** · 08/06/2011, 17h12

Re Andry.Aime,

J'ai pu résoudre le problème mais ça marche sur chrome et non sur IE ou FF et puis lorsque je clic pour reafficher ça me ramène en haut de la page or j'aimerai que ça soit à l'endroit où j'ai cliqué.

A+