Afficher ou cacher un div lors d'un clic en HTML CSS Javascript Comment masquer un <div> js ?

HTML CSS JAVASCRIPT
AFFICHER OU CACHER UN DIV

AFFICHER OU CACHER UN <DIV>

Comment afficher ou cacher un div lors d'un clic sur un lien ou un bouton en HTML CSS Javascript ?

ESSAYEZ MOI !

Clique sur un bouton

Tu as cliqué sur le bouton 1

Tu as cliqué sur le bouton 2

Tu as cliqué sur le bouton 3

Code JavaScript :

<script type="text/javascript">
     var divs = ["div1", "div2", "div3"];
      var visibleId = null;
      function affichediv(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>

Code CSS :

</style> 
 .button {
  background-color: #555555; /* noir */
  border: none;
  color: white;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
 }
 
 .dicadre{
 background-color: #ffffff;
 border : 2px solid #1c87c9;
 border-radius: 5px;
 Padding:8px;
 margin-top:8px;
}
 
 #div1 {
  display: none;
  font-weight: bold;
  background-color: #339966;
  color: white; 
}
 
 #div2 {
  display: none;
  font-weight: bold;
  background-color: #FF6600;
  color: white;
}
 #div3 {
 font-weight: bold; 
 display: none;
 background-color: #FFFF99;
}		
</style>

Code HTML :

><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Changer la couleur d'un bouton lors d'un clic - www.yakafaire.eu</title>

     
   </style> 
 .button {
  background-color: #555555; /* noir */
  border: none;
  color: white;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
 
 .dicadre{
 background-color: #ffffff;
 border : 2px solid #1c87c9;
 border-radius: 5px;
 Padding:8px;
 margin-top:8px;
}
 
 #div1 {
  display: none;
  font-weight: bold;
  background-color: #339966;
  color: white; 
}
 
 #div2 {
  display: none;
  font-weight: bold;
  background-color: #FF6600;
  color: white;
}
 #div3 {
 font-weight: bold; 
 display: none;
 background-color: #FFFF99;
}		
</style>
   </head>

    <body>

   <button class="button" onclick="affichediv('div1');">Bouton 1</button>
  <button class="button" onclick="affichediv('div2');">Bouton 2</button> 
  <button class="button" onclick="affichediv('div3');">Bouton 3</button>
  
  <div class="dicadre" id="div1">
 Tu as cliqué sur le bouton 1
  </div>
  
  <div class="dicadre" id="div2">
 Tu as cliqué sur le bouton 2
 </div>
 
   <div class="dicadre" id="div3">
 Tu as cliqué sur le bouton 3
  </div>

<script type="text/javascript">
      var divs = ["div1", "div2", "div3"];
      var visibleId = null;
      function affichediv(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>
  
    </body>

</html>