Discussion :

[Jessyv96]

Bonjour,

Je travail sur un projet JS, j'ai un petit soucis, j'ai des boutons qui affichent du contenu, j'arrive à afficher et cacher un élément mais je n'arrive pas à cacher tous les autres.

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
18
19
20
21
22
23
24
25
26
 
let bouton1 = document.getElementById('button-1');
let bouton2 = document.getElementById('button-2');
let bouton3 = document.getElementById('button-3');
 
let content1 = document.getElementById('content-1');
let content2 = document.getElementById('content-2');
let content3 = document.getElementById('content-3');
 
let allContent = document.getElementsByClassName('content');
 
function displayContent(bouton, content) {
  bouton.addEventListener('click', function(){
  if (content.style.display === "none") {
    content.style.display = "block";
 
  } else {
    content.style.display = "none";
  }
  });
}
 
 
displayContent(bouton1, content1);
displayContent(bouton2, content2);
displayContent(bouton3, content3);

J'aimerai faire une fonction qui lorsque j'affiche un élément s'occupe de cacher les autres éléments de façon a ce qu'il y ait toujours un seul contenu d'afficher, es-ce-que vous auriez une idée de comment m'y prendre.
Si vous avez besoin de plus d'info, n'hésitez pas.

[Invité]

Bonjour,

Solution 1, basique, "à l'ancienne" :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<nav>
  <button type="button" class="button" onclick="displayContent(1);">bouton 1</button>
  <button type="button" class="button" onclick="displayContent(2);">bouton 2</button>
  <button type="button" class="button" onclick="displayContent(3);">bouton 3</button>
</nav>
 
<section>
  <div class="content" id="content-1">contenu 1</div>
  <div class="content" id="content-2">contenu 2</div>
  <div class="content" id="content-3">contentu 3</div>
<section>

Code css :

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

1
2
.content { display:none; } /* on masque tout au départ */
#content-1 { display:block; } /* on peut choisir d'afficher le 1er */

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
function displayContent(num) {
  for (i = 1; i <= 3; i++) { // à modifier, si on veut ajouter des boutons/contents
    if (i == num) {
      document.getElementById("content-" + i).style.display = "block";
    } else {
      document.getElementById("content-" + i).style.display = "none";
    }
  }
}

Solution 2, plus "souple" (on peut ajouter des boutons/contents, sans changer le JavaScript) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<nav>
  <button type="button" class="button" data-num="1">bouton 1</button>
  <button type="button" class="button" data-num="2">bouton 2</button>
  <button type="button" class="button" data-num="3">bouton 3</button>
</nav>
 
<section>
  <div class="content" id="content-1">contenu 1</div>
  <div class="content" id="content-2">contenu 2</div>
  <div class="content" id="content-3">contenu 3</div>
<section>

Code css :

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

1
2
.content { display:none; } /* on masque tout au départ */
#content-1 { display:block; } /* on peut choisir d'afficher le 1er */

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
let boutons = document.querySelectorAll(".button");
let contents = document.querySelectorAll(".content");
boutons.forEach(function(bouton) {
  bouton.addEventListener("click", function() {
    let num = bouton.dataset.num;
    contents.forEach(function(content) {
      content.style.display = (content.id == "content-"+num)? "block" : "none";
    });
  });
});