隐藏/显示多个div

Question

I would like to hide / show some div box, by clicking one text line. To summarize, it must do something like Android File Explorer.

These 2 pictures show the difference when I click on the Mes Vidéos text field.

Here is a part of my current code :

 function folderChange(param) { var video=document.getElementById('v'); var file=document.getElementById('f'); if(param==1) { video.style.display = "block"; file.style.display = "none"; } else { file.style.display = "block"; video.style.display = "none"; } }

 .filefolder { display: none; } .videofolder { display: block; }

 <div class="groove2"></div> <div class="chemin filefolder" id="f" style="background-color:#FAF9F8" style="color:#BDBCBA"><font color="#575654">Flashdisk <b>> Mes Fichiers</b></font></div> <div class="chemin videofolder" id="v" style="background-color:#FAF9F8" style="color:#BDBCBA"><font color="#575654">Flashdisk ><b onclick="folderChange(0)"> Mes Fichiers</b> ><b> Mes Vidéos</b></font></div> <div class="groove2"></div> <div id="madiv"> <div class="videofolder" id="v"> <div> <input type="checkbox" id="contactChoice1" name="fichier" value="Video1"> <img class="icone" src="video.jpg"> <label for="Video1">Video1.mp4</label> </div> <div class="groove"></div> </div> <div id="f" class="filefolder"> <div class="folder"> <img class="icone" src="dossier.jpg" onclick="folderChange(1)"> <p onclick="folderChange(1)"><b>Mes Vidéos</b></p> </div> <div class="groove"></div> </div> <div class="filefolder"> <div id="f" class="blok"> <input class="off" type="checkbox" disabled="true" id="contactChoice1" name="fichieroff" value="Video1"> <img class="icone" src="xls.jpg"> <label for="Video1"><b>Resultats.xlsx</b></label> </div> <div class="groove"></div> </div>

What I'm expected to do is to change the display value of videofolder and filefolder when I click on Mes Vidéos , but on the screen, nothing change (or just the path display).

I'm pretty newbie on HTML and Javascript.

NB : there is no file reader currently, I'm just working on the display.

Answer 1

If you only have two types of things to show/hide, you can iterate through them with a single line, and apply classList.toggle() to them:

 function folderChange() { document.querySelectorAll(".video, .file").forEach(el => el.classList.toggle("show")) }

 .video, .file { display: none } .show { display: block }

 <button onclick="folderChange()">Show Files</button> <button onclick="folderChange()">Show Videos</button> <p class="video">video a</p> <p class="file show">file a</p> <p class="video">video b</p> <p class="video">video c</p> <p class="file show">file b</p> <p class="file show">file c</p> <p class="file show">file d</p> <p class="video">video d</p> <p class="video">video e</p> <p class="file show">file e</p>