« Modèle:Boîte déroulante » : différence entre les versions
De 21Wiki
(Page créée avec « <noinclude> Ceci est le modèle « Boîte déroulante ». Il devrait être appelé selon le format suivant : <pre> {{Boîte déroulante }} </pre> Modifiez la page pour voir le wikitexte du modèle. </noinclude><includeonly>{| class="wikitable" |} </includeonly> ») |
Aucun résumé des modifications Balise : Éditeur de wikicode 2017 |
||
| Ligne 1 : | Ligne 1 : | ||
<noinclude> | <noinclude> | ||
== Utilisation == | |||
{{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 | |||
|- | |||
| Ligne 2, Colonne 1 || Ligne 2, Colonne 2 || Ligne 2, Colonne 3 | |||
|} | |||
}} | |||
== Syntaxe == | |||
{{Boîte déroulante | {{Boîte déroulante | ||
|1= | |||
|titre= | |||
|contenu= | |||
}} | }} | ||
</ | |||
== Paramètres == | |||
</noinclude><includeonly>{| class=" | *'''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> | ||
Version du 3 mars 2023 à 11:56
Utilisation
Titre de la boîte déroulante
{
Syntaxe
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>
