Manuel:Eléments repliables

From mediawiki.org
This page is a translated version of the page Manual:Collapsible elements and the translation is 44% complete.
MediaWiki offers collapsible classes out of the box for MediaWiki 1.18 and higher. For earlier community versions, see this revision.

jQuery.makeCollapsible

Voir aussi la documentation de jQuery.makeCollapsible pour plus d'informations sur son fonctionnement.
Voir aussi : Manual:Collapsible elements/Demo/Advanced pour plus d'exemples.

Ce module est dans le noyau MediaWiki par défaut depuis MediaWiki 1.18 et supérieur. Ce module est livré avec MediaWiki par défaut. Vous n'avez pas besoin de le copier sur un wiki. The source (if you're interested) is in the repository for mediawiki-core (resources/src/jquery/jquery.makeCollapsible.js and resources/src/jquery/jquery.makeCollapsible.css).

Ajoutez la classe mw-collapsible à n'importe quel élément (div, table, liste, n'importe quoi) pour le déclencher.

It does not work on mobile (phab:T111565).

Tableau

Un tableau peut être replié comme n'importe quel autre élément. La différence est qu'une partie du tableau reste visible, même lorsqu'elle est réduite. Un tableau avec une légende garde la légende visible :

{| class="mw-collapsible"
|+ Caption
|-
! scope="col" | Header 1
! scope="col" | Header 2
|-
| Data 1
| Data 2
|}
Caption
Header 1 Header 2
Data 1 Data 2

A table without a caption keeps the first row visible:

{| role="presentation" class="mw-collapsible"
|-
| Lorem
| ipsum  
|-
| dolor
| sit
|}

Résultat :

Avec état initial spécifié

You can add mw-collapsed after mw-collapsible to have the content collapsed by default when you load the page.

To set the initial state as collapsed add "mw-collapsed", such as seen in the following table:

{| class="mw-collapsible mw-collapsed wikitable"
! colspan="2" | The header remains visible.  
|-
| This  content || is hidden
|-
| at first || load time
|}
The header remains visible.  
This content is hidden
at first load time
{| class="mw-collapsible mw-collapsed wikitable"
|+ style=white-space:nowrap | The caption remains visible. 
|-
! Text !! More text
|-
| This  content || is hidden
|-
| at first || load time
|}
The caption remains visible.
Text More text
This content is hidden
at first load time

You can add a padded border around the caption to make it easier to see that it is a collapsed table:

|+ style="white-space:nowrap; border:1px solid; padding:3px;" | The caption remains visible. 
The caption remains visible.
Text More text
This content is hidden
at first load time

Simple

<!-- overflow:auto; to fix collapsed display, because the toggle link has float:right; -->
<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
This text is collapsible. {{Lorem}}
</div>

Résultat :

This text is collapsible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Using the data-collapsetext and data-expandtext attributes one can define a custom text for the toggle labels added by the script. When added in wikitext these could be populated by a localized message like:

<div class="mw-collapsible" data-expandtext="{{int:show}}" data-collapsetext="{{int:hide}}">

Simple avec titre

<div class="toccolours mw-collapsible" style="width:400px; overflow:auto;">
<div style="font-weight:bold;line-height:1.6;">Lorem ipsum sample</div>
<div class="mw-collapsible-content">
This text is collapsible. {{Lorem}}
</div></div>

Résultat :

Lorem ipsum sample
This text is collapsible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Avec partie pliable spécifiée

By default, a collapsible non-table element collapses completely.

To keep some content visible, even when collapsed, you can specify which part is the collapsible content.

<div class="toccolours mw-collapsible mw-collapsed">
This text is not collapsible; but the next is collapsible and hidden by default:
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>

Résultat :

This text is not collapsible; but the next is collapsible and hidden by default:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Avec lien bascule personnalisé

Cette méthode est inaccessible et déroutante pour les utilisateurs de lecteurs d'écran. Évitez de l'utiliser

If you don't want the script to put the default toggle link (whether or not with a custom label) in your element, you can make one of your own. This could reside anywhere inside or outside the collapsible element. Its relationship to the collapsible element is detected by using an ID attribute with the prefix mw-customcollapsible and a corresponding class attribute with prefix mw-customtoggle for the collapsible element and the togglelink respectively.

<span class="mw-customtoggle-myDivision">Toggle link</span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">Toggled text</div>
<span class="mw-customtoggle-myDivision">Additional toggle link</span>

Résultat :

Toggle link

Toggled text

Additional toggle link

Inside another element

You can also use collapsible elements in other elements, such as a table.

My table with collapsible info
Title Sample
Lorem Ipsum
More info
Number Letter  
1 A
2 B
3 C

Déplacer le lien bascule vers la gauche

Wide images and long bare URLs in collapsible tables or elements can cause the toggle link to go offscreen to the right when expanded. In cell phones for example. Sometimes it is difficult or impossible to get over to the toggle link to click it and close it. The following CSS puts the toggle link all the way to the left, and leaves a little space between it and the text to its right. The toggle link position does not change as the table or element is expanded or collapsed. Place the CSS in common.css by editing page "MediaWiki:common.css". Also edit mobile.css if you are importing jquery.makeCollapsible into mobile.js. For examples see common.css, mobile.js, and mobile.css

/* Collapsible elements. Toggle-link moved to left.
/* Margin around it adjusted. */

.mw-collapsible span.mw-collapsible-toggle {
    float:left;
    margin-left:0;
    margin-right:1em;
}

Removing brackets from the toggle

If you want to hide the brackets in the default or custom label toggle links (for aesthetic or other reasons):

.mw-collapsible-toggle-default:before, .mw-collapsible-toggle-default:after {
    display: none;
}

Voir aussi