Afficher/Masquer plusieurs DIV en Javascript
Dans ce tutoriel nous allons découvrir comment afficher et masquer plusieurs éléments(DIV) sur une page en Javascript. Par exemple, cliquez sur un en-tête pour afficher l’élément <div>, puis cliquez à nouveau pour masquer l’élément <div>. Ceci utilise du JavaScript pur, pas de librairie jQuery ou autre.
Script pour afficher et masquer plusieurs DIV
<html> <body> <div> <a href="#" onclick="show('Section1');">Section1</a> <a href="#" onclick="show('Section2');">Section2</a> <a href="#" onclick="show('Section3');">Section3</a> <a href="#" onclick="show('Section4');">Section4</a> </div> <br> <div id="Section1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat libero id metus congue, eget pulvinar nulla viverra. Donec id placerat est. Ut iaculis consequat consectetur.</div> <div id="Section2" style="display: none;">Duis erat sapien, sagittis consectetur odio at, bibendum porttitor ante. Pellentesque commodo viverra vehicula. Curabitur at ultricies velit. Curabitur eget tortor quam. Cras sagittis quis mauris eu tincidunt. Ut id tortor vulputate, cursus orci ut, bibendum tortor.<br><img src="https://via.placeholder.com/500x100"/></div> <div id="Section3" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div id="Section4" style="display: none;"><img src="https://via.placeholder.com/500x400"/></div> </body> <script type="text/javascript"> var divs = ["Section1", "Section2", "Section3", "Section4"]; var visibleId = null; function show(id) { if(visibleId !== id) { visibleId = id; } hide(); } function hide() { var div, i, id; for(i = 0; i < divs.length; i++) { id = divs[i]; div = document.getElementById(id); if(visibleId === id) { div.style.display = "block"; } else { div.style.display = "none"; } } } </script> </html>
Résultat |
---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat libero id metus congue, eget pulvinar nulla viverra. Donec id placerat est. Ut iaculis consequat consectetur.
|
Bonjour,
– afficher et masquer plusieurs DIV –
Je me posais la question : Comment faire pour fermer la div qui reste ouverte ? Quand on reclique sur le lien (ou bouton) ça ne fonctionne pas. Il y sûrement quelque chose à ajouter mais je n’arrive pas à trouver. Auriez-vous la réponse ? Pour mon besoin, il ne s’agit pas d’une nav mais le principe reste le même. Merci pour votre aide.
Valérie