FANDOM


Cette fonctionnalité ne fonctionne pas sur appareils mobiles de la même façon que sur orduinateur. Généralement, tout élément en enroulement automatiquement (auto-collapsed) est simplement déroulé sur mobile et il n'y a aucun bouton pour afficher/masquer. Lors de l'utilisation de cette fonctionnalité, assurez-vous de regarder si ça fonctionne comme vous le souhaitez sur mobile.

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.

ExemplesModifier

Rendre un tableau déroulant Modifier

En ajoutant la classe mw-collapsible, un tableau peut être enroulé pour économiser de l'espace sur la page.

Nombre Lettre
1 A
2 B
3 C
{| class="wikitable mw-collapsible" style="float:right"
! Nombre !! Lettre
|-
| 1 || A
|-
| 2 || B
|-
| 3 || C
|}

Rendre un texte déroulant Modifier

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.

Exemple :

<div class="mw-collapsible">
Ce texte peut être enroulé.
</div>

donne :

Ce texte peut être enroulé.

Paramètres avancésModifier

État initial Modifier

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 wikitable"
! L'en-tête || reste visible
|-
| Ce contenu || est masqué
|-
| au premier || chargement
|}

donne :

L'en-tête reste visible
Ce contenu est masqué
au premier chargement

Sélectionner le contenu à rendre déroulant Modifier

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 texte est enroulé (et donc 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>

donne :

Ce texte n'est pas déroulant, mais le texte est enroulé (et donc masqué) par défaut :

Ce texte doit être masqué par défaut.

Ce texte doit aussi être visible.

Libellés personnalisés Modifier

Vous n'aimez pas « Enrouler » / « Dérouler » pour les liens ? Pas de problèmes ! Modifiez-les en utilisant data-expandtext et data-collapsetext.

Exemple :

{| class="wikitable mw-collapsible" data-expandtext="Amplificatum" data-collapsetext="Reducto"
!Mon || en-tête
|-
| A || B
|-
| C || D
|}

donne :

Mon en-tête
A B
C D

Bouton afficher/masquer Modifier

Vous l'aurez peut-être remarqué dans le tableau donné en exemple ci-dessus, le lien dans la deuxième colonne augmente grandement la largeur du tableau par rapport au texte qu'il contient. Il est possible de palier à cela en plaçant l'action n'importe où ailleurs sur 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 à cet élément. En utilisant notre tableau ci-dessus, nous pouvons ajouter l'ID mw-customcollapsible-myTable.

Ceci s'occupe du tableau 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).

Exemple :

{| class="wikitable mw-collapsible" id="mw-customcollapsible-myTable"
!Mon || en-tête
|-
| A || B
|-
| C || D
|}

<div class="mw-customtoggle-myTable communauté-menu-button">Afficher/Masquer tableau</div>
Mon en-tête
A B
C D

Afficher/Masquer tableau

Voir aussi Modifier

Plus d'aideModifier