Balise : Éditeur de wikicode 2017 |
Balise : Éditeur de wikicode 2017 |
| (5 versions intermédiaires par le même utilisateur non affichées) |
| Ligne 1 : |
Ligne 1 : |
| <noinclude> | | <includeonly> |
| == Utilisation == | | {| class="{{{class|}}}" |
| | | |- |
| {{Boîte déroulante|1=identifiant_de_la_boite_deroulante | | ! {{{label-1|}}}: |
| |titre=Titre de la boîte déroulante
| | | {{{options-1|}}}: |
| |contenu=
| | | {{{default-1|}}}: |
| }} | | |- |
| | | ! {{{label-2|}}}: |
| == Syntaxe ==
| | | {{{options-2|}}}: |
| {{Boîte déroulante | | | {{{default-2|}}}: |
| |1=
| | |- |
| |titre= | | ! {{{label-3|}}}: |
| |contenu=
| | | {{{options-3|}}}: |
| }} | | | {{{default-3|}}}: |
| | | |} |
| == Paramètres ==
| | </includeonly> |
| *'''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>
| |
| | |
| </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> | |
