Modèle:Boîte déroulante

Utilisation

       [+]
       Titre de la boîte déroulante 

       { 

Syntaxe

       [+]
       Titre par défaut 

       Contenu par défaut 

Paramètres

• 1 : identifiant unique de la boîte déroulante. Obligatoire.
• titre : titre de la boîte déroulante. Facultatif. Si aucun titre n'est spécifié, le texte par défaut s'affichera.
• contenu : contenu de la boîte déroulante. Facultatif. Si aucun contenu n'est spécifié, le texte par défaut s'affichera.

CSS

<style type="text/css"> .boite-deroulante {

   margin: 1em 0;
   border: 1px solid #aaa;
   padding: 0;
   overflow: hidden;

}

.boite-deroulante .titre {

   background-color: #f5f5f5;
   padding: 0.5em;
   font-weight: bold;
   cursor: pointer;

}

.boite-deroulante .contenu {

   padding: 0.5em;
   display: none;

} </style>

Script toggleBox

<script type="text/javascript"> function toggleBox(id) {

   var box = document.getElementById(id);
   var icon = box.previousElementSibling.lastElementChild;
   if (box.style.display == 'none') {
       box.style.display = 'block';
       icon.innerHTML = '[-]';
   } else {
       box.style.display = 'none';
       icon.innerHTML = '[+]';
   }

} </script>

       [+]
       Titre par défaut 

       Contenu par défaut