Balise : Éditeur de wikicode 2017 |
Balise : Éditeur de wikicode 2017 |
| (13 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 | |
| |titre=Titre de la boîte déroulante
| |
| |contenu=
| |
| {| class="wikitable" | |
| ! Titre 1 !! Titre 2 !! Titre 3
| |
| |- | | |- |
| | Ligne 1, Colonne 1 || Ligne 1, Colonne 2 || Ligne 1, Colonne 3
| | ! {{{label-1|}}}: |
| | | {{{options-1|}}}: |
| | | {{{default-1|}}}: |
| |- | | |- |
| | Ligne 2, Colonne 1 || Ligne 2, Colonne 2 || Ligne 2, Colonne 3 | | ! {{{label-2|}}}: |
| | | {{{options-2|}}}: |
| | | {{{default-2|}}}: |
| | |- |
| | ! {{{label-3|}}}: |
| | | {{{options-3|}}}: |
| | | {{{default-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 {
| |
| 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>
| |
|
| |
|
| |
|
| |
| <includeonly><div class="boite-deroulante">
| |
| <div class="boite-deroulante-titre" onclick="toggleBox('boite-deroulante-{{$1}}');">
| |
| <span class="boite-deroulante-titre-texte">
| |
| {{{titre|Titre de la boîte déroulante}}}
| |
| </span>
| |
| <span class="boite-deroulante-icone">
| |
| [+]
| |
| </span>
| |
| </div>
| |
| <div class="boite-deroulante-contenu" id="boite-deroulante-{{$1}}">
| |
| {{{contenu|Contenu de la boîte déroulante}}}
| |
| </div>
| |
| </div>
| |
| </includeonly> | | </includeonly> |
