Fonction pour afficher et masquer des éléments simultanément

Hello à tous,

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

Code:

---

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:

---

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

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:

---

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

---

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:

---

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:

---

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:

---

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

---

ca devrait être un bon début.

Cordialement

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

:?

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:

---

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'; }

---

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.

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

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:

---

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:

---

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 } }

---

Bonjour,
simplement :

Code:

---

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:

---

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>

---

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 !

Code:

---

var e = document.getElementById(id);

---

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

elt

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

ben comme sus-dit
e => elt

Merci à tous pour vos réponses !