Discussion :

[Dsphinx]

Hello à tous,

J'ai une fonction qui permet d'afficher des éléments :

Code :

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

1
2
3
4
5
6
7
		function toggle_visibility(id) {
		   var e = document.getElementById(id);
		   if(e.style.display == 'block')
			  e.style.display = 'none';
		   else
			  e.style.display = 'inline';
		}

Une liste :

• Animaux
• Voitures
• Personnes

Quand je clique sur animaux je fais apparaître "Chiens, Chats, etc" et je voudrais que lorsque je clique sur Voitures, je masque "Chiens, Chats, etc" et j'affiche "Toyota, Renault, Ford, etc".

Actuellement la fonction ne fait qu'afficher sans masquer les autres éléments.

Code :

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

1
2
3
<a href='#' onclick="toggle_visibility('1');" >Animaux</a>
 
<div style='display:none;' id='1'>Chiens, Chats, etc</div>

Merci de votre aide...

[utopman]

bonjour Dsphinx,

fervant admirateur du framework jquery , je te propose ma solution basée sur ce framework.
le principe est d'utiliser une balise script qui fait référence à la librairie en local ou sur le réseau

Code :

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

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Puis d'utiliser une balise de script pour mettre ton propre code javascript dedans.
Jquery est un framework evenementiel qui attache à certains éléments html des fonctions à exécuter lorsqu'une certaine action est déclenchée (click, mouseover...).
pour que ces fonctions soient associées correctement il faut que les éléments html auxquels ils sont associés existent déjà dans la page du client. Pour faire cela, on dispose de la fonction

Code :

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

1
2
3
window.onload = function(){
//code...
}

qui exécutera le code une fois que tout sera bien chargé.
En Jquery , cela s'écrit comme ca:

Code :

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

1
2
3
4
5
 
$(document).ready(
  function(){
    //code
});

Ensuite, on attache des fonctions à des évènements en utilisant des sélecteurs jquery (semblables à ceux du CSS), on peut alors utiliser des fonctions de la librairie Jquery sur tout élément html convenablement sélectionné. on dira que tu ajoutes class="mesElements" à toutes tes div qui vont être interactives

Code :

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

1
2
3
4
5
6
7
 
$('.mesElements').click(
  function(){
    $('.mesElements').slideDown(300);//300 est le temps que met l'animation à se faire
    $(this).fadeOut(1500); //this est l'element qui est cliqué
  }
);

Avec ce code qu'on place à l'intérieur de la fonction

Code :

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

$(document).ready(function(){/*ici*/});

ca devrait être un bon début.

Cordialement

[Dsphinx]

Merci de ta réponse.

Jquery est une bonne chose mais je cherche simplement un petit script javascript pas trop lourd à mettre en place... Je suppose qu'il manque juste une ligne à mon code pour être fonctionnel.

Si je n'ai pas pas le choix éventuellement, mais je ne pense pas tout modifier maintenant...

[MaitreKaio]

Je crois que ton problème est tout simplement que ta fonction toggle devrait faire faire basculer la propriété display de l'élément entre 'block' et 'none' et que tu as fait une erreur en introduisant 'inline'. Autrement dit essaie cette correction:

Code :

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

1
2
3
4
5
6
7
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

[Dsphinx]

Ah oui effectivement ! Merci !

L'erreur est corrigée mais le problème est toujours présent. Lorsque je clique sur "Voitures", il affiche "Toyota, Renault, Ford" mais ne masque pas "Chiens, Chats, etc".

Merci de votre aide.

[SpaceFrog]

Un simple test sur l'id dans la boucle pour attribuer le display ...

[Kaamo]

quelle boucle ?

J'ai une ptite solution ... après je ne sais pas si c'est correct en terme de perf etc ...

il faut faire une fonction qui parcourt les éléments div à cacher, test s'ils sont affichés et les cache le cas échéant (s'il ne s'agit pas de l'élément à afficher bien sûr.)

Pour différencier les div "à cacher", d'autres div de la page, tu peux faire commencer l'id par "hi" par exemple.

La fonction qui fait le boulot en sniffant le DOM

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
/* Cache les div affichées commençant par "hi" à l'exception de div_current */
function hideDiv (div_current) {
  // récupération des éléments div de la page
  mesDiv = document.getElementsByTagName('div');
 
  // boucle dessus pour cacher celles qui sont affichées (qui commencent par "hi")
  for (var i = 0; i < mesDiv.length; i++) {
    if ((mesDiv[i].id).substr(0,2) == 'hi' && mesDiv[i].id != div_current && mesDiv[i].style.display != 'none')
      mesDiv[i].style.display = 'none';
  }
}

L'ajouter à ta fonction :

Code javascript :

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

1
2
3
4
5
6
7
8
9
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else {
      e.style.display = 'block';
      hideDiv(id); // on cache alors les autres
   }
}

[Invité]

Bonjour,
simplement :

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
<script type="text/javascript">
function toggle_visibility(id) {
	var e = document.getElementById(id);
	var idtotal = 3; // nombre total de div (id = 1, 2, .... idtotal)
	for (i=1; i<=idtotal; i++)
	{
		if(id==i){ // id concerné
			if(e.style.display == 'block')
				e.style.display = 'none';
			else
				e.style.display = 'block';
		} else { // autres id
			document.getElementById(i).style.display = 'none';
		}
	}
}
</script>

Code :

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

1
2
3
4
5
6
7
<a href="#" onclick="toggle_visibility('1');" >Animaux</a>
<a href="#" onclick="toggle_visibility('2');" >Voitures</a>
<a href="#" onclick="toggle_visibility('3');" >Autres</a>
 
<div style="display:none;" id="1">Chiens, Chats, etc</div>
<div style="display:none;" id="2">Toyota, Renault, Ford, etc</div>
<div style="display:none;" id="3">ceci, cela, etc</div>

[Dsphinx]

Merci jreaux62 ! C'est top de chez top ! J'essaie d'installer le code qui fonctionne très bien si on a un une suite d'id qui se suivent !

Malheureusement, j'ai des id qui sont extrait d'une BD et ne peuvent être modifié chronologiquement car ils sont utilisés dans la suite du code !

Y-a-t-il un autre moyen ? ou bricole ?

Merci !

[SpaceFrog]

Code :

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

var e = document.getElementById(id);

e ... => risques de conflit avec event ...

elt

[Dsphinx]

Merci SpaceFrog ! Donc, on peut résoudre le bug ? De mon côté, je n'ai rien vu comme problème...

[SpaceFrog]

ben comme sus-dit
e => elt

[Dsphinx]

Merci à tous pour vos réponses !