Afficher un élément et cacher les autres

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:

---

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.

Bonjour,

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

Code:

---

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:

---

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

---

Code:

---

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:

---

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:

---

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

---

Code:

---

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"; }); }); });

---