Contenu repliable

De Gamepedia Help Wiki
Aller à : navigation, rechercher

Cette documentation est une version adaptée de la documentation de Resource Loader Modules:

Dans certaines situations, avoir des éléments repliables peut être utile pour alléger une page ou améliorer son ergonomie. Ces éléments peuvent êtres personalisé en utilisant divers attributs.

  • Lien d'activation par défaut: Ajouter la classe (class) mw-collapsible à un élément avec du contenu et enregistrez la page. Le contenu à l'intérieur de cet élément sera traité comme un élément repliable. Un lien d'activation sera ajouté juste avant l'élément repliable. Le texte de ce lien est configurable (collapsible-expand et collapsible-collapse). Pour que l'élément soit replié par défaut, ajouter la classe (class) mw-collapsed à l'élément.
  • Texte personnalisé (HTML5 seulement): En utilisant les attributs data-collapsetext et data-expandtext, il est possible de modifier le texte du lien d'activation. Le comportement de l'élément restera le le même.
  • Lien d'activation détaché: Pour remplacer complètement le lien d'activation par défaut, définissez l'élément à replier et ajouter un id avec le préfixe mw-customcollapsible-. Ajoutez ensuite la classe (class) avec le préfixe mw-customtoggle- correspondant pour le lien d'activation.

Exemples[modifier | modifier le wikicode]

Lien d'activation par défaut[modifier | modifier le wikicode]

Code:

{| class="infobox"
! Foo
| Bar
|-
! Lorem
| Ipsum
|-
! Information supplémentaire
|<!--
-->
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! Titre 1
! Titre 2
|-
| Contenu 1
| Contenu 2
|-
| Cette table est repliable
| car elle possède la classe « mw-collapsible »
|-
| Elle était à l'origine repliée car
| elle possède la classe « mw-collapsed »
|}<!--
-->
|-
|}

<div class="toccolours mw-collapsible" style="color:#000;width: 400px;">
Ce texte est repliable.
</div>

Résultat:

Foo Bar
Lorem Ipsum
Information supplémentaire
Titre 1 Titre 2
Contenu 1 Contenu 2
Cette table est repliable car elle possède la classe « mw-collapsible »
Elle était à l'origine repliée car elle possède la classe « mw-collapsed »

Ce texte est repliable.


Texte personnalisé[modifier | modifier le wikicode]

Code:

{| 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="Open" data-collapsetext="Close" style="width:300px;">
Ce texte n'est pas caché.
<div class="mw-collapsible-content">
Ce texte est caché.

et on le vois seulement

quand 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 caché.

et on le vois seulement

quand il est déplié.


Lien d'activation détaché[modifier | modifier le wikicode]

Code:

<div class="mw-customtoggle-myDivision" style="color:#700">Cliquez ici pour activer l'élément</div>

<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
<div class="mw-collapsible-content">Lorem ipsum dolor sit amet...</div>
</div>

<div class="mw-customtoggle-myDivision" style="color:#070">Cliquer ici l'activera également!</div>

Résultat:

Cliquez ici pour activer l'élément
Lorem ipsum dolor sit amet...
Cliquer ici l'activera également!

Remplacer le contenu[modifier | modifier le wikicode]

Code:

<div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:#700">Cliquez ici pour activer 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%;"
|-
!Rangée 1 || 1 || 2 || 3  
|-
!Rangée 2 || 4 || 5 || 6
|-
!Rangée 3 || 7 || 8 || 9
|}
</div>
</div>

<div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:#070">Cliquer ici l'activera également!</div>

Résultat:

Cliquez ici pour activer l'élément
Colonne 1 Colonne 2 Colonne 3
1 2 3
4 5 6
7 8 9
Rangée 1 1 2 3
Rangée 2 4 5 6
Rangée 3 7 8 9
Cliquer ici l'activera également!

Retirer les crochets du lien d'activation[modifier | modifier le wikicode]

La règle de style suivante peut être ajoutée dans la feuille de style de votre wiki pour ne pas afficher de crochets sur le lien d'activation:

span.mw-collapsible-bracket {
    display: none;
}