masquer/afficher un div avec + ou -

Version imprimable

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:

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">  </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.

Salut,

en HTML :

Code:

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

En JS :

Code:

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 ;)

06/06/2011, 18h27
chougadosu

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

Code:

<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.:(

Bonjour,

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

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

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:

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:

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>

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:

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

08/06/2011, 11h32
chougadosu

Salut Andry.aime,
j'ai essayé avec

Code:

<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.
08/06/2011, 11h53
andry.aime

Citation:

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.

Citation:

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.

Citation:

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+.
08/06/2011, 16h12
chougadosu

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+
09/06/2011, 08h15
andry.aime

Re,

Code:

<a href="#" onclick="return false;">

A+.
09/06/2011, 15h44
chougadosu

Re andry.aime,

merci pour ton aide