« 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 69 : Ligne 69 :
<includeonly>
<includeonly>
<div class="boite-deroulante">
<div class="boite-deroulante">
<div class="boite-deroulante-titre" onclick="toggleBox('boite-deroulante-{{$1}}');">
    <div class="titre" onclick="toggleBox('boite-deroulante-'+this.parentNode.getAttribute('id'))">
<span class="boite-deroulante-titre-texte">
        <span>[+]</span>
{{{titre|Titre de la boîte déroulante}}}
        {{#if:{{{titre|}}}|{{{titre}}}|Titre par défaut}} <!-- Titre par défaut sera affiché si aucun titre n'est spécifié -->
</span>
    </div>
<span class="boite-deroulante-icone">
    <div class="contenu" id="boite-deroulante-{{#if:{{{1|}}}|{{{1}}}|id_par_defaut}}}">
[+]
        {{#if:{{{contenu|}}}|{{{contenu}}}|Contenu par défaut}} <!-- Contenu par défaut sera affiché si aucun contenu n'est spécifié -->
</span>
    </div>
</div>
<div class="boite-deroulante-contenu" id="boite-deroulante-{{$1}}">
{{{contenu|Contenu de la boîte déroulante}}}
</div>
</div>
</div>
</includeonly>
</includeonly>

Version du 3 mars 2023 à 12:00

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>