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.
NOTE : Au moment où nous écrivons ces lignes, les règles CSS par défaut pour les tables déroulantes et le bouton de basculement sont absents sur l'UCP. Ils sont fournis sur cette page et peuvent être ajoutés à votre page CSS à l'échelle du wiki et modifiés pour correspondre au style de votre wiki.

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[modifier le wikicode]

Rendre un tableau déroulant[modifier le wikicode]

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 le wikicode]

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 :

Ce texte peut être enroulé.

Paramètres avancés[modifier le wikicode]

État initial[modifier le wikicode]

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" style="width:300px;""
! L'en-tête || reste visible
|-
| Ce contenu || est masqué
|-
| jusqu'au clic || sur « afficher »
|}
L'en-tête reste visible
Ce contenu est masqué
jusqu'au clic sur « afficher »

Sélectionner le contenu à rendre déroulant[modifier le wikicode]

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 être masqué par défaut.

Ce texte doit aussi être visible.

Libellés personnalisés[modifier le wikicode]

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
|}
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="&#9660;" data-collapsetext="▲"
!Mon || En-tête
|-
| A || B
|-
| C || D
|}
Mon En-tête
A B
C D

Bouton de basculement[modifier le wikicode]

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).

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

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

Afficher/Masquer tableau

Voir aussi[modifier le wikicode]

Plus d'aide

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA.