Afficher / masquer div

Bonsoir les amis,
Je reviens vers vous ce soir, car le code ce n'est pas comme le vélo, ça s'oublie avec le temps :p

Dur de s'y remettre mais bon on fait aller ! J'ai cependant un petit souci avec un morceau de code ...
C'est trois fonctions qui vous sembleront très basique, afficher div, masquer div, et afficher / masquer div, et une quatrième pour masquer le tout.

J'utilise ça car j'ai besoin d'afficher certaines choses en survol (onmouseover), et d'autres en click (onclick)
Jusqu'ici ça fonctionne, je peux afficher en survol, et avec onmouseout ça disparait. Idem pour le afficher / masquer avec onclick.
Le tout fonctionne avec "display"

Mon problème est que je n'arrive pas à faire en sorte que ma fonction afficher / masquer (practice_hide_view) affiche un div à la fois, j'ai essayer de chercher sur mon meilleur ami pour trouver une réponse, alors peut être que je m'exprime mal, cela expliquerai pourquoi je n'ai pas eu de résultat .... :z
Tout fonctionne, mais je peux afficher div1_2 et div 2_ ... _5 en même temps alors qu'un seul à la fois serai le top (:

Voici un morceau mon code JavaScript ..

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
25
26
27
28
29
30
31
32
33
// JavaScript Document practice info hide + info view & info hide/view
function practice_view(id)
{
          document.getElementById(id).style.display = 'block';
}
function practice_hide(id)
{
          document.getElementById(id).style.display = 'none';
}
function practice_hide_all_clicked_div()
{
          document.getElementById('practice_div1_2').style.display = 'none'
          document.getElementById('practice_div2_2').style.display = 'none'
          document.getElementById('practice_div3_2').style.display = 'none'
          document.getElementById('practice_div4_2').style.display = 'none'
          document.getElementById('practice_div5_2').style.display = 'none';
}
function practice_hide_view(id){
        if(document.getElementById(id).style.display == "block"){
          document.getElementById(id).style.display = "none";
          document.getElementById('bouton_'+id);
 
        }
        else{
          var alldiv = document.querySelectorAll('[id^="bloc"]');
          for(var i=0; i< alldiv.length;i++) {
            alldiv[i].style.display = "none";
            document.getElementById('bouton_bloc'+ i);
          }
          document.getElementById(id).style.display = "block";
          document.getElementById('bouton_'+id);
        }
      }

.. et mon html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="liens">
<label onmouseover="practice_view('practice_div1')" onmouseout="practice_hide('practice_div1')" onclick="practice_hide_view('practice_div1_2')">Click ou survol 1</label><br />
-<br />
<label onmouseover="practice_view('practice_div2')" onmouseout="practice_hide('practice_div2')" onclick="practice_hide_view('practice_div2_2')">Click ou survol 2</label><br />
-<br />
<label onmouseover="practice_view('practice_div3')" onmouseout="practice_hide('practice_div3')" onclick="practice_hide_view('practice_div3_2')">Click ou survol 3</label><br />
-<br />
<label onmouseover="practice_view('practice_div4')" onmouseout="practice_hide('practice_div4')" onclick="practice_hide_view('practice_div4_2')">Click ou survol 4</label><br />
-<br />
<label onmouseover="practice_view('practice_div5')" onmouseout="practice_hide('practice_div5')" onclick="practice_hide_view('practice_div5_2')">Click ou survol 5</label><br />
-<br />
<label onclick="practice_hide_all_clicked_div()">Cacher tout ce qui est actif</label><br /><br />
</div>
<div style="display:none" id="practice_div1">div 1 : survol</div>
<div style="display:none" id="practice_div1_2">div 1_2 : click</div>
<div style="display:none" id="practice_div2">div 2 : survol</div>
<div style="display:none" id="practice_div2_2">div 2_2 : click</div>
<div style="display:none" id="practice_div3">div 3 : survol</div>
<div style="display:none" id="practice_div3_2">div 3_2 : click</div>
<div style="display:none" id="practice_div4">div 4 : survol</div>
<div style="display:none" id="practice_div4_2">div 4_2 : click</div>
<div style="display:none" id="practice_div5">div 5 : survol</div>
<div style="display:none" id="practice_div5_2">div 5_2 : click</div>

Merci pour votre temps

Bonjour,
déjà ta fonction practice_hide_view est bizarre, tu fais appel à des éléments qui n'existent pas dans ton code comme par exemple document.querySelectorAll('[id^="bloc"]'), mais peut-être n'a t'on pas tout.

Tu peux factoriser tes fonctions pour en simplifier la lecture/exécution.
Exemple 1

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function practice_hide_all_clicked_div() {
  // récup. de tous les éléments
  const elements = document.querySelectorAll('[id^="practice"]');
  elements.forEach((el) => {
    el.style.display = "none"
  });
  /*  
  document.getElementById('practice_div1_2').style.display = 'none'
  document.getElementById('practice_div2_2').style.display = 'none'
  document.getElementById('practice_div3_2').style.display = 'none'
  document.getElementById('practice_div4_2').style.display = 'none'
  document.getElementById('practice_div5_2').style.display = 'none';
  /*--*/
}

Exemple 2

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
25
26
function practice_hide_view(id) {
  const element = document.getElementById(id);
  let state = "block";
  if (element.offsetWidth) {
    state = "none";
  }
  element.style.display = state;
  /*
  if (document.getElementById(id)
    .style.display == "block") {
    document.getElementById(id)
      .style.display = "none";
    document.getElementById('bouton_' + id);
 
  } else {
    var alldiv = document.querySelectorAll('[id^="bloc"]');
    for (var i = 0; i < alldiv.length; i++) {
      alldiv[i].style.display = "none";
      document.getElementById('bouton_bloc' + i);
    }
    document.getElementById(id)
      .style.display = "block";
    document.getElementById('bouton_' + id);
  }
  /*--*/
}

Avec cela tu devrais y voir plus clair.

Enfin un dernier point serait de supprimer le « code JS inline » et avoir recours à l'attachement d'événement via addEventListener.

Merci de la réponse

Effectivement ton code est beaucoup plus simple (: tout fonctionne maintenant

Merci encore, à bientôt !