Le déroulement (collapsing en anglais) en HTML est une fonctionnalité pour dérouler (ou enrouler) un élément.
Il peut arriver qu'une page contienne beaucoup d'éléments qui la rendent très longue. Utiliser la fonctionnalité de déroulement permet aux éditeurs de raccourcir la page et permet aux lecteurs de dérouler les zones qui les intéressent. De la même façon que pour le sommaire, les autres parties d'une page d'une communauté peuvent être modifiées pour être déroulables.
Pour rendre un élément déroulable, ajoutez-y simplement la classe mw-collapsible
.
Exemples[]
Rendre un tableau déroulant[]
En ajoutant la classe mw-collapsible
, un tableau peut être enroulé pour économiser de l'espace sur la page.
{| class="article-table mw-collapsible" ! Nombre !! Lettre |- | 1 || A |- | 2 || B |- | 3 || C |}
Ce qui donne :
Nombre | Lettre |
---|---|
1 | A |
2 | B |
3 | C |
Rendre un texte déroulant[]
Il est possible d'enrouler le texte d'un article, réduisant concrètement la page et permettant aux lecteurs de décider s'ils souhaitent lire le reste des informations. Par exemple :
<div class="mw-collapsible"> '''Ce texte peut être enroulé.''' </div>
Ce qui donne :
Paramètres avancés[]
État initial[]
Pour définir l'état initial enroulé, ajoutez mw-collapsed
en plus de mw-collapsible
, comme montré dans le tableau suivant :
{| class="mw-collapsible mw-collapsed article-table" ! L'en-tête || reste visible |- | Ce contenu || est masqué |- | jusqu'au clic || sur « afficher » |}
Ce qui donne :
L'en-tête | reste visible |
---|---|
Ce contenu | est masqué |
jusqu'au clic | sur « afficher » |
Sélectionner le contenu à rendre déroulant[]
Vous pouvez aussi spécifier quelle partie du contenu doit être déroulant en utilisant mw-collapsible-content
.
Exemple :
<div class="mw-collapsible mw-collapsed" style="width:100%"> '''Ce texte n'est pas déroulant ; mais le suivant est déroulant et masqué par défaut :''' <div class="mw-collapsible-content">Ce texte doit être masqué par défaut.</div> '''Ce texte doit aussi être visible.''' </div>
Ce qui donne :
Ce texte n'est pas déroulant ; mais le suivant est déroulant et masqué par défaut :
Ce texte doit aussi être visible.
Libellés personnalisés[]
Vous n'aimez pas « Afficher »/« Masquer » pour les liens ? Pas de problèmes ! Modifiez-les en utilisant « data-expandtext
» et « data-collapsetext
».
{| class="article-table mw-collapsible mw-collapsed" data-expandtext="Afficher les spoilers" data-collapsetext="Masquer les spoilers" !Mon || En-tête |- | A || B |- | C || D |}
Ce qui donne :
Mon | En-tête |
---|---|
A | B |
C | D |
Pour un bouton bascule plus compact, n'importe quel symbole de texte peut être utilisé.
{| class="article-table mw-collapsible mw-collapsed" data-expandtext="▼" data-collapsetext="▲" !Mon || En-tête |- | A || B |- | C || D |}
Ce qui donne :
Mon | En-tête |
---|---|
A | B |
C | D |
Bouton de basculement[]
Dans le premier exemple de la section précédente, vous pouvez remarquer que le lien « Afficher les spoilers » dans la deuxième colonne augmente considérablement la largeur du tableau. Nous pouvons également remédier à ce problème en déplaçant le bouton à bascule vers un autre endroit de la page.
Pour faire cela, nous devons assigner un identifiant (ID) à l'élément. Cet ID doit commencer par mw-customcollapsible-
et être suivi d'une phrase clé unique pour cet élément. En utilisant notre tableau ci-dessus, nous pouvons ajouter l'ID « mw-customcollapsible-myTable
».
Cela prend effet sur le tableau en lui-même. Ensuite, nous devons ajouter un élément bouton/lien/texte avec la classe mw-customtoggle-myTable
(veuillez noter que c'est une classe et non un ID comme ci-dessus).
<div class="mw-customtoggle-myTable wds-button wds-is-secondary">Afficher/Masquer tableau</div> {| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable" !Mon || En-tête |- | A || B |- | C || D |}
Ce qui donne :
Mon | En-tête |
---|---|
A | B |
C | D |
Exemples avancés[]
Lien de basculement par défaut[]
Saisie :
{| class="infobox"
! Foo
| Bar
|-
! Lorem
| Ipsum
|-
! Plus d'info
|<!--
-->
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! Entête
! Top
|-
| Cellule
| contenu
|-
| Cette table est réductible
| Parce qu'elle a la classe « mw-collapsible »
|-
| Elle était initialement cachée, car elle
| avait la classe « mw-collapsed »
|}<!--
-->
|-
|}
<div class="toccolours mw-collapsible" style="color:#000;width: 400px;">
Ce texte est réductible.
</div>
Résultat :
Foo | Bar | ||||||||
---|---|---|---|---|---|---|---|---|---|
Lorem | Ipsum | ||||||||
Plus d'info |
|
Ce texte est réductible.
Libellé personnalisé[]
Saisie :
{| class="wikitable mw-collapsible mw-collapsed" data-expandtext="+" data-collapsetext="-"
! Colonne 1 !! Colonne 2 !! Colonne 3
|-
| 1 || 2 || 3
|-
| 4 || 5 || 6
|-
| 7 || 8 || 9
|}
<div class="mw-collapsible mw-collapsed" data-expandtext="Ouvrir" data-collapsetext="Fermer" style="width:300px;">
Ce texte n'est pas caché
<div class="mw-collapsible-content">
Ce texte est entièrement caché
et n'apparaît que
que lorsqu'il est déplié.
</div></div>
Résultat :
Colonne 1 | Colonne 2 | Colonne 3 |
---|---|---|
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
Ce texte n'est pas caché
Ce texte est entièrement caché
et n'apparaît que
que lorsqu'il est déplié.
Basculement à distance[]
Saisie :
<div class="mw-customtoggle-myDivision mw-customtoggle-myDivision2" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Afficher tous les spoilers</div>
<div class="mw-customtoggle-myDivision" style="color:#070">Troll div au milieu</div>
<div class="mw-customtoggle-myDivision" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Spoiler 1</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
<div class="mw-collapsible-content" style="background:rgba(255,255,255,.5);margin-top:10px;padding:10px;border-radius:5px">
¡ SALUT ! Je suis un spoiler
</div>
<div class="mw-customtoggle-myDivision2" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Spoiler 2</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision2">
<div class="mw-collapsible-content" style="background:rgba(255,255,255,.5);margin-top:10px;padding:10px;border-radius:5px">
¡ SALUT ! Je suis un spoiler
</div>
</div></div>
Résultat :
Changement du texte pour les autres[]
Saisie :
<div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:#c00">Cliquer ici pour basculer l'élément</div>
<div class="mw-collapsible" id="mw-customcollapsible-myFirstText">
<div class="mw-collapsible-content">
{| class="wikitable"
! Colonne 1 !! Colonne 2 !! Colonne 3
|-
| 1 || 2 || 3
|-
| 4 || 5 || 6
|-
| 7 || 8 || 9
|}
</div>
</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myOtherText">
<div class="mw-collapsible-content">
{| class="wikitable" style="width:15%;"
|-
!Ligne 1 || 1 || 2 || 3
|-
!Ligne 2 || 4 || 5 || 6
|-
!Ligne 3 || 7 || 8 || 9
|}
</div>
</div>
<div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:#0a0">Cliquer basculera cela également !</div>
Résultat :
Colonne 1 | Colonne 2 | Colonne 3 |
---|---|---|
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
Ligne 1 | 1 | 2 | 3 |
---|---|---|---|
Ligne 2 | 4 | 5 | 6 |
Ligne 3 | 7 | 8 | 9 |
Retirer les crochets du lien de basculement[]
La règle de style suivante peut être ajoutée à la feuille de style du wiki pour masquer les crochets du libellé par défaut ou personnalisé des liens de basculement :
.mw-collapsible-toggle-default:before,
.mw-collapsible-toggle-default:after {
display: none;
}
Voir aussi[]
- Éléments déroulants sur MediaWiki.org (en anglais)
Plus d'aide
- Parcourez et recherchez d'autres pages d'aide sur Aide:Contenu
- Visitez le Centre des communautés pour plus d'aide
- Consultez Aide:Contacter Fandom pour savoir comment signaler des erreurs ou des points à éclaircir sur cet article