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

De 21Wiki
VisuelWikicode
Aucun résumé des modifications
Balise : Éditeur de wikicode 2017
Aucun résumé des modifications
Balise : Éditeur de wikicode 2017
Ligne 1 : Ligne 1 :
<style>
<noinclude>
div.toggleBox h3 {
== Utilisation ==
    font-size: 110%;
 
    font-weight: bold;
{{Nom_du_modèle|1=identifiant_de_la_boite_deroulante
    cursor: pointer;
|titre=Titre de la boîte déroulante
    margin: 0;
|contenu=
}
{| class="wikitable"
! Titre 1 !! Titre 2 !! Titre 3
|-
| Ligne 1, Colonne 1 || Ligne 1, Colonne 2 || Ligne 1, Colonne 3
|-
| Ligne 2, Colonne 1 || Ligne 2, Colonne 2 || Ligne 2, Colonne 3
|}
}}
 
== Syntaxe ==
{{Nom_du_modèle
|1=
|titre=
|contenu=
}}
 
== 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.


div.toggleBox.collapsedBox h3:before {
== CSS ==
     content: "▶";
<style type="text/css">
.boite-deroulante {
    margin: 1em 0;
    border: 1px solid #aaa;
    padding: 0;
     overflow: hidden;
}
}


div.toggleBox h3:before {
.boite-deroulante .titre {
     content: "▼";
     background-color: #f5f5f5;
     display: inline-block;
     padding: 0.5em;
     margin-right: .3em;
    font-weight: bold;
     cursor: pointer;
}
}


div.toggleBox pre {
.boite-deroulante .contenu {
    padding: 0.5em;
     display: none;
     display: none;
}
}
</style>
</style>


<div class="toggleBox" style="border:1px solid black;padding:1em;">
== Script toggleBox ==
    <h3 onclick="toggleBox(this)">Titre de la boîte</h3>
<script type="text/javascript">
    <pre>
function toggleBox(id) {
        <nowiki>
    var box = document.getElementById(id);
            {| class="wikitable"
    var icon = box.previousElementSibling.lastElementChild;
            ! Entête 1 !! Entête 2 !! Entête 3
    if (box.style.display == 'none') {
            |-
        box.style.display = 'block';
            | Ligne 1, cellule 1 || Ligne 1, cellule 2 || Ligne 1, cellule 3
        icon.innerHTML = '[-]';
            |-
    } else {
            | Ligne 2, cellule 1 || Ligne 2, cellule 2 || Ligne 2, cellule 3
        box.style.display = 'none';
            |}
        icon.innerHTML = '[+]';
        </nowiki>
    </pre>
</div>
 
<script>
    function toggleBox(elem) {
        var box = elem.parentNode;
        var pre = box.getElementsByTagName('pre')[0];
        if (box.className.indexOf('collapsedBox') > -1) {
            box.className = box.className.replace('collapsedBox','');
            pre.style.display = 'block';
        } else {
            box.className += 'collapsedBox';
            pre.style.display = 'none';
        }
     }
     }
}
</script>
</script>
</noinclude>
<div class="boite-deroulante">
    <div class="titre" onclick="toggleBox('boite-deroulante-'+this.parentNode.getAttribute('id'))">
        <span>[+]</span>
        {{#if:{{{titre|}}}|{{{titre}}}|Titre par défaut}} <!-- Titre par défaut sera affiché si aucun titre n'est spécifié -->
    </div>
    <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é -->
    </div>
</div>

Version du 3 mars 2023 à 12:09

Utilisation

Modèle:Nom du modèle

Syntaxe

Modèle:Nom du modèle

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
Récupérée de « https://wiki.21jumpclick.fr/index.php?title=Modèle:Boîte_déroulante&oldid=40742 »