Voir la source de Projet sur espace web

<source>
<!doctype html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet" type="text/css">
    <title>Demo</title>
  </head>
  <body>
    <div id="bloc1">voir le bloc numéro 2</div>
    <div id="bloc2">voir le bloc numéro 3</div>
    <div id="bloc3">ceci est le bloc numéro 3</div>
    <script src="script.js"></script>
  </body>
</html>
</source>
<source>
div{
  position:absolute;
  width:200px;
  height:200px;
  border:1px solid black;
  cursor:pointer;

}
div:hover{
  background:gray;
}
#bloc1{

}
#bloc2{
  right:10px;
  top:10px;
  display:none;
}
#bloc3{
  bottom:10px;
  display:none;
}

</source>
<source>
function montrerBloc2(){
  bloc2 = document.querySelector('#bloc2');
  bloc2.style.display = "block";
}

function montrerBloc3(){
  bloc3 = document.querySelector('#bloc3');
  bloc3.style.display = "block";
}

bloc1 = document.querySelector('#bloc1');
console.log(bloc1);
bloc1.addEventListener('click', montrerBloc2);

bloc2 = document.querySelector('#bloc2');
bloc2.addEventListener('click', montrerBloc3);

</source>