Refermer un div quand un autre s'ouvre

Version imprimable

Bonjour à tous,

voici ma fonction javascript
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function visibilite(thingId) { var targetElement; targetElement = document.getElementById(thingId) ; if (targetElement.style.display == "none") { targetElement.style.display = "" ; } else { targetElement.style.display = "none" ; } }
J'aimerai que la div qui devient visible redevienne invisible quand je clique sur la suivante.
Une Idée ?

21/08/2014, 17h06
devyan

Bonjour,

Merci d'utiliser la balise CODE (bouton #)

Oui.

Tu ajoutes une classe pour identifier ton groupe de DIV.
Ensuite lors de ton clic, tu rends toutes les DIV.groupe invisibles quand tu rends thingId visible.

Par contre, on ne peut pas cliquer sur une DIV en display:none ...

devYan.

Bonjour ,

Merci Devyan pour ta réponse ,mais je ne comprend toujours pas comment faire.
Voici un extrait de mon code HTML peut ètre y verra tu plus clair.
Code:

1 2 3 4 5 6 7 8 <div id="juin"> <table style="cursor:pointer;width:220px;cellpadding:1px; border-width:1px;border-style:solid;border-color:#00539f;" onclick="javascript:visibilite('id_div_1'); return false;" > <tr style="widht:100%;height:20px"> <td style="width:100px;background-color:#00539f;text-align:center;color:white;font-style:bold;">Juin</td> <td style="padding-left:20px;"><img style="vertical-align:middle" src="images/pictoe-learning2.png" alt="logo_myeajf"/><span style="font-size: 12px;">E-Learning </span></td> </tr> </table> <div id="id_div_1" style="display:none;">
J'ai en tout 9 <div id='moi'> et donc 9 <div id=id_div_'numéro'> . Sachant que c'est des div id je peux pas y rajouter de class non?.
J'ai essayé de bidouiller le code javascript directement mais sans réussite . je pense que je dois rajouter une variable au javascript ou une autre function néanmoins étant novice dans le domaine cela devient hardue.

bon j'ai trouvé une alternative, la voici pour ceux qui serait confronté au même problème.
code javascript

Code:

1
2
3
4
5
6
7
8
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}

et dans le HTML

Code:

1
2
3
4
5
6
7
<table style="cursor:pointer;width:220px;cellpadding:1px; border-width:1px;border-style:solid;border-color:#00539f;" onclick="showdiv('id_div_1');">
		      <tr style="widht:100%;height:20px">
			     <td style="width:100px;background-color:#00539f;text-align:center;color:white;font-style:bold;">Juin</td>
			     <td style="padding-left:20px;"><img style="vertical-align:middle" src="images/pictoe-learning2.png" alt="logo_myeajf"/><span style="font-size: 12px;">E-Learning </span></td>
		      </tr>
	       </table>
	       <div id="id_div_1" style="display:none;">

Donc quand je clic la div s'ouvre et quand je clic sur la div suivante la précédente se referme, ce que je cherchais :)
Néanmoins avec ce code il n'est pas possible de refermer la div qui vient d'être ouverte en reclicant dessus :(
Donc problème à moitié résolu.

Je suppose que tous tes DIV "id_div_X" sont les uns sous les autres.

Tu peux donc pour simplifier les mettre dans un DIV "visualisation" (par exemple)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<table style="cursor:pointer;width:220px;cellpadding:1px; border-width:1px;border-style:solid;border-color:#00539f;" 
         onclick="showdiv();">
<tr style="widht:100%;height:20px">
<td style="width:100px;background-color:#00539f;text-align:center;color:white;font-style:bold;">Juin</td>
<td style="padding-left:20px;"><img style="vertical-align:middle" src="images/pictoe-learning2.png" alt="logo_myeajf"/><span style="font-size: 12px;">E-Learning </span></td>
</tr>
</table>
<div id="visualisation">
    <div id="id_div_1" style="display:none;" onclick="this.style.display='none';" >contenu de 1</div>
    <div id="id_div_2" style="display:none;" onclick="this.style.display='none';" >contenu de 2</div>
...
    <div id="id_div_9" style="display:none;" onclick="this.style.display='none';" >contenu de 9</div>
</div>

Tu peux ensuite lors du clic dire "je cache tout et j'affiche le suivant"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// indice en variable globale
var idNum = 1;
 
function showdiv() {
    var divConteneur = document.getElementById("visualisation"),
        listeDiv, divVisible;
 
 
    // cacher tout
    listeDiv = divConteneur.getElementsByTagName("div")
 
    for (var d in listeDiv) {
        listeDiv[d].style.display = "none";
    }
 
    // afficher le DIV sélectionné (idNum)
    divVisible = document.getElementById("id_div_" + idNum);
    divVisible.style.display = "";
 
    // préparer l'affichage du suivant ( tu peux aussi mettre 9 et 1 dans des variables :) )
    idNum = (idNum < 9) ? idNum+1 : 1;
}

Bonjour,

Dès que le problème s'énonce de cette façon : "faire ceci lorsqu’il se passe cela." On est typiquement dans la gestion d'événement.

Par exemple : "afficher "hello word" lorsqu'on clique sur le bouton B."
Ton sujet s'exprime exactement de la sorte.
"Refermer le DIV A quand le DIV B s'ouvre"

à priori s'il existait un événement "show" et "hide" sur l'élément DIV tu ne te poserais pas de question.
Tu ferais quelque chose comme
Code:

1 2 3 4 5 var bElem = document.getElementById('B'); bEleme.addEventListener('show', function (e) { //afficher A document.getElementById('A')....; }, false);
Qui décrit bien quand 'B' s'affiche, faire ...

JavaScript te permet de faire ça.
Ajoutons une fonction show et hide au DIV A et B avec ces fonctions les DIV peuvent être ouvert ou fermés avec un appel à la méthode show et hide. ces méthodes affiche ou cache, le DIV et génère un événement.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var aElem = document.getElementById('A'); var bElem = document.getElementById('B'); aElem.show = function () { var event = new Event('show'); this.style.display = "block"; this. dispatchEvent(event); } aElem.hide = function () { var event = new Event('hide'); this.style.display = "none"; this. dispatchEvent(event); } //B utilise les mêmes fonctions bElem.show = aElem.show; bElem.hide = aElem.hide;
nous avons donc maintenant des DIV un peut particuliers car ils ont les méthodes show et hide pour les afficher/cacher qui en plus signalent par un événement qu'ils ont été affichés ou cachés
Code:

1 2 aElem.show(); bElem.hide();
Mais nous pouvons aussi maintenant faire ce qui est le fond de la question
Afficher "hello word" lorsque A est caché
Code:

1 2 3 aElem. addEventListener('hide', function (e) { alert('hello word'); }, false);
continuons
fermer A lorsque B s'ouvre
Code:

1 2 3 bElem. addEventListener('show', function (e) { document.getElementById('A').hide(); }, false);
Cette façon de faire s'appelle la programmation événementielle.
On peut attacher des données à l'événement si besoin.

L’avantage est que chaque élément ne se concentre que sur sa partie et notifie le système de ce qu'il se passe.
Du coup si un ou plusieurs autres objets sont intéressés par ces événements il leur suffit de s'abonner.

La programmation événementielle est au coeur de tous les systèmes interactifs de type IHM, mais elle peut servir à énormément d'autres choses. elle a été introduite dans les années 70 (1970 pour les jeunes ;))

L’exemple donné ici n'a qu'un but pédagogique pour illustrer le principe. Il est possible de l'implémenter de bien des façons et de l'améliorer grandement. Par exemple, n'envoyer l'événement que si l'état change et non lorsque la méthode show ou hide est appelé.

Si vous exécutez cet exemple sur deux div l'affichage de B provoque la fermeture de A qui elle-même entraine l'affichage de 'Hello Word' pour tant il n'y a pas de couplage des actions dans le code c'est juste une réaction en chaine des événements.

Il fut un temps où les OS (windows macos etc...) ne pouvaient pas faire plusieurs choses à la fois. Pas de process, pas de thread. On utilisait alors les événements pour gérer les boucles longues.

dans JavaScript (HTML5 pallie le Pb) lorsqu'on fait un for sur des millions d'éléments cela bloque l'IHM
Il suffit de faire une boucle sur 10 éléments et de lancer un événement indiquant où on en est.
La page reprend la main et peut gérer d'autres événements lorsqu’arrive le tour de celui de la boucle, on traite 10 éléments et on recommence.
Du coup, on a l'impression que la boucle se traite en tâche de fond. L’utilisateur n'est plus bloqué.
Tout ça pour dire que les événements peuvent servir à beaucoup de choses.

A+JYT