« Modèle:Boîte déroulante » : différence entre les versions

De 21Wiki
Aucun résumé des modifications
Balise : Éditeur de wikicode 2017
Aucun résumé des modifications
Balise : Éditeur de wikicode 2017
Ligne 35 : Ligne 35 :
}
}


.boite-deroulante .titre {
.boite-deroulante-titre {
     background-color: #f5f5f5;
     background-color: #f5f5f5;
     padding: 0.5em;
     padding: 0.5em;
Ligne 42 : Ligne 42 :
}
}


.boite-deroulante .contenu {
.boite-deroulante-contenu {
     padding: 0.5em;
     padding: 0.5em;
     display: none;
     display: none;
Ligne 67 : Ligne 67 :




<includeonly><div class="boite-deroulante">
<includeonly>
<div class="boite-deroulante">
<div class="boite-deroulante-titre" onclick="toggleBox('boite-deroulante-{{$1}}');">
<div class="boite-deroulante-titre" onclick="toggleBox('boite-deroulante-{{$1}}');">
<span class="boite-deroulante-titre-texte">
<span class="boite-deroulante-titre-texte">

Version du 3 mars 2023 à 11:58

Utilisation

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

{


Syntaxe

[+]


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>