« 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 :
{{#invoke:Modèle|Scribunto}}
<style>
<noinclude>
div.toggleBox h3 {
== Utilisation ==
    font-size: 110%;
    font-weight: bold;
    cursor: pointer;
    margin: 0;
}


{{Boîte déroulante|1=identifiant_de_la_boite_deroulante
div.toggleBox.collapsedBox h3:before {
|titre=Titre de la boîte déroulante
    content: "▶";
|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 ==
{{Boîte déroulante
|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.
 
== CSS ==
<style type="text/css">
.boite-deroulante {
    margin: 1em 0;
    border: 1px solid #aaa;
    padding: 0;
    overflow: hidden;
}
}


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


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


== Script toggleBox ==
<div class="toggleBox" style="border:1px solid black;padding:1em;">
<script type="text/javascript">
    <h3 onclick="toggleBox(this)">Titre de la boîte</h3>
function toggleBox(id) {
    <pre>
    var box = document.getElementById(id);
        <nowiki>
    var icon = box.previousElementSibling.lastElementChild;
            {| class="wikitable"
    if (box.style.display == 'none') {
            ! Entête 1 !! Entête 2 !! Entête 3
        box.style.display = 'block';
            |-
         icon.innerHTML = '[-]';
            | Ligne 1, cellule 1 || Ligne 1, cellule 2 || Ligne 1, cellule 3
    } else {
            |-
        box.style.display = 'none';
            | Ligne 2, cellule 1 || Ligne 2, cellule 2 || Ligne 2, cellule 3
         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:08

<style> div.toggleBox h3 { 

   font-size: 110%;
   font-weight: bold;
   cursor: pointer;
   margin: 0;

}

div.toggleBox.collapsedBox h3:before { 

   content: "▶";

}

div.toggleBox h3:before { 

   content: "▼";
   display: inline-block;
   margin-right: .3em;

}

div.toggleBox pre { 

   display: none;

} </style>

Titre de la boîte

        
            {| class="wikitable"
            ! Entête 1 !! Entête 2 !! Entête 3
            |-
            | Ligne 1, cellule 1 || Ligne 1, cellule 2 || Ligne 1, cellule 3
            |-
            | Ligne 2, cellule 1 || Ligne 2, cellule 2 || Ligne 2, cellule 3
            |}

<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>

Récupérée de « https://wiki.21jumpclick.fr/index.php?title=Modèle:Boîte_déroulante&oldid=40741 »