« 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 :
<noinclude>
<div class="toggleBox" style="border:1px solid black;padding:1em;">
== Utilisation ==
    <h3 onclick="toggleBox(this)">Titre de la boîte</h3>
 
    <pre>
{{Boîte déroulante|1=identifiant_de_la_boite_deroulante
        <nowiki>
|titre=Titre de la boîte déroulante
            {| class="wikitable"
|contenu=
            ! Entête 1 !! Entête 2 !! Entête 3
}}
            |-
 
            | Ligne 1, cellule 1 || Ligne 1, cellule 2 || Ligne 1, cellule 3
== Syntaxe ==
            |-
{{Boîte déroulante
            | Ligne 2, cellule 1 || Ligne 2, cellule 2 || Ligne 2, cellule 3
|1=
            |}
|titre=
        </nowiki>
|contenu=
     </pre>
}}
</div>
 
== 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 {
<script>
    padding: 0.5em;
    function toggleBox(elem) {
    display: none;
        var box = elem.parentNode;
}
        var pre = box.getElementsByTagName('pre')[0];
</style>
        if (box.className.indexOf('collapsedBox') > -1) {
 
            box.className = box.className.replace('collapsedBox','');
== Script toggleBox ==
            pre.style.display = 'block';
<script type="text/javascript">
         } else {
function toggleBox(id) {
            box.className += 'collapsedBox';
    var box = document.getElementById(id);
            pre.style.display = 'none';
    var icon = box.previousElementSibling.lastElementChild;
         }
    if (box.style.display == 'none') {
        box.style.display = 'block';
         icon.innerHTML = '[-]';
    } else {
        box.style.display = 'none';
         icon.innerHTML = '[+]';
     }
     }
}
</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:19

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=40745 »