Cacher/Afficher une div avec un checkbox

Bonjour,

Je suis entrain de faire un site et je voudrais que lorsque je clique sur un checkbox du contenu s'affiche hors mon code ne fonctionne pas, Pouvez-vous m'aidez?

Merci beaucoup!!

Mon Code HTML:

<div class = "zone2" ><br> 
      <form name="formulaire">      
       <p style="color: red;">Cliquez pour vous inscrire<input id="inscrire" type="checkbox"></p>   
       <div id="cours" style="color: red" >
         
         
           <input type="checkbox" name="ubuntu"> Système d'exploitation Ubuntu (60heures) <br><br>
           <input type="checkbox" name="prog"> Fondements de la programmation (90heures)<br><br>
           <input type="checkbox" name="robot"> Robotique & Algorithmie (45heures)<br><br>
           <input type="checkbox" name="progstruct"> Programmation avec les structures de données (90heures)<br><br>
           <input type="checkbox" name="web"> Web HTML 5, CSS 3, Javascript base (60heures)<br><br>
           <input type="checkbox" name="base"> Base de données - Microsoft Access, MySQL (60heures)<br><br>
           <input type="checkbox" name="php"> Web PHP (120heures)<br><br>
           <input type="checkbox" name="Objet"> Programmation Orientée Objet avec le langage C++  (90heures)
         
       </div>
     </form>
       
    </div>
<script src="js/javascript.js" > </script>

Mon code CSS :

.zone2
{
  border-style: ridge;
  border-color: grey;
  position: relative;
  z-index: 4;
  margin-left:20px;
  width: 1000px; 
}

Mon code Javascript :

//Afficher et masquer des sections de formulaire
function preparePage()
{
 document.getElementById("inscrire").onclik = function() {
 
 if (document.formulaire.inscrire.checked){
  document.getElementById("cours").style.display ="block";
 } else{
  document.getElementById("cours").style.display ="none";
 }

 
}
document.getElementById("cours").style.display = "none";

window.onload = function (){
 preparePage();
};
 

EDIT : Ajout des balises de code

Voila!!