Contenu repliable

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 personnalisés en utilisant divers attributs.

• Lien d'activation par défaut: Ajoutez 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, ajoutez 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 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 ajoutez 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

Lien d'activation par défaut

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é

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é

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

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

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;
}