Matahombress (talk | contribs) m (add new example -> change text for other) |
m (→Change text for other: Easier to read) |
||
(11 intermediate revisions by 7 users not shown) | |||
Line 1: | Line 1: | ||
− | Adapted from Resource Loader Modules [https://www.mediawiki.org/wiki/ResourceLoader/Modules documentation]: |
||
− | |||
For certain situations, having collapsible content areas defined in an article or template may be useful for saving space or improving usability of information in long articles. These may be customized by using certain custom attributes, and combinations of class and id attributes. |
For certain situations, having collapsible content areas defined in an article or template may be useful for saving space or improving usability of information in long articles. These may be customized by using certain custom attributes, and combinations of class and id attributes. |
||
+ | |||
+ | You can copy the following templates to your wiki for easy creation of simple collapsible sections: |
||
+ | * {{tl|Collapse top}} |
||
+ | * {{tl|Collapse bottom}} |
||
+ | |||
+ | Both templates are required. Simply place {{tl|Collapse top}} above the content to be collapsed, on its own line, and place {{tl|Collapse bottom}} below the content, also on its own line. |
||
+ | |||
+ | == Manual instructions == |
||
+ | Adapted from [[mw:ResourceLoader/Core modules|Resource Loader Modules documentation]]: |
||
* Default toggle link: Add <code>mw-collapsible</code> to an element's <code>class</code> attribute with some content and save the page. The inner content of this element will be treated as collapsible content. Prepended to the element, before the collapsible content, is a toggle-link with a localized label ([[MediaWiki:Collapsible-expand|collapsible-expand]], [[MediaWiki:Collapsible-collapse|collapsible-collapse]]). To set the initial state to collapsed, add <code>mw-collapsed</code> to the <code>class</code> attribute. |
* Default toggle link: Add <code>mw-collapsible</code> to an element's <code>class</code> attribute with some content and save the page. The inner content of this element will be treated as collapsible content. Prepended to the element, before the collapsible content, is a toggle-link with a localized label ([[MediaWiki:Collapsible-expand|collapsible-expand]], [[MediaWiki:Collapsible-collapse|collapsible-collapse]]). To set the initial state to collapsed, add <code>mw-collapsed</code> to the <code>class</code> attribute. |
||
− | * Custom label (HTML5 only): Using the <code>data-collapsetext</code> and <code>data-expandtext</code> attributes defines custom text for the toggle labels added by the script. This retains the default behavior of the script, but only changes the text used for the toggle links. |
+ | * Custom label (HTML5 only): Using the <code>data-collapsetext</code> and <code>data-expandtext</code> attributes defines custom text for the toggle labels added by the script. This retains the default behavior of the script, but only changes the text used for the toggle links. Some browsers in common use may not support this feature. |
* Remote toggle: To completely replace the toggle link and explicitly define the content area to be collapsed (which may be different from where the toggle link is placed), add an <code>id</code> atribute with a value containing a <code>mw-customcollapsible-</code> prefix for the collapsible element, and a corresponding <code>class</code> attribute with a <code>mw-customtoggle-</code> prefix for the toggle link. |
* Remote toggle: To completely replace the toggle link and explicitly define the content area to be collapsed (which may be different from where the toggle link is placed), add an <code>id</code> atribute with a value containing a <code>mw-customcollapsible-</code> prefix for the collapsible element, and a corresponding <code>class</code> attribute with a <code>mw-customtoggle-</code> prefix for the toggle link. |
||
+ | == Examples == |
||
− | === |
+ | === Default toggle link === |
'''Input:''' |
'''Input:''' |
||
Line 74: | Line 82: | ||
|} |
|} |
||
− | <div class="toccolours mw-collapsible" style=" |
+ | <div class="toccolours mw-collapsible" style="width: 400px;"> |
This is text is collapsible. |
This is text is collapsible. |
||
</div> |
</div> |
||
Line 81: | Line 89: | ||
---- |
---- |
||
− | === |
+ | === Custom Label === |
'''Input:''' |
'''Input:''' |
||
Line 131: | Line 139: | ||
---- |
---- |
||
− | === |
+ | === Remote toggle === |
'''Input:''' |
'''Input:''' |
||
Line 137: | Line 145: | ||
<syntaxhighlight lang="html4strict"> |
<syntaxhighlight lang="html4strict"> |
||
+ | |||
⚫ | |||
+ | <div class="mw-customtoggle-myDivision mw-customtoggle-myDivision2" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Toggle all Spoiler</div> |
||
+ | |||
⚫ | |||
+ | |||
+ | <div class="mw-customtoggle-myDivision" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Spoiler 1</div> |
||
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision"> |
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision"> |
||
− | <div class="mw-collapsible-content" |
+ | <div class="mw-collapsible-content" style="background:rgba(255,255,255,.5);margin-top:10px;padding:10px;border-radius:5px"> |
+ | ¡HI! I am a spoiler |
||
− | </div> |
+ | </div> |
+ | <div class="mw-customtoggle-myDivision2" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Spoiler 2</div> |
||
+ | |||
+ | <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision2"> |
||
+ | <div class="mw-collapsible-content" style="background:rgba(255,255,255,.5);margin-top:10px;padding:10px;border-radius:5px"> |
||
+ | ¡HI! I am a spoiler |
||
⚫ | |||
+ | </div></div> |
||
⚫ | |||
</syntaxhighlight> |
</syntaxhighlight> |
||
Line 149: | Line 169: | ||
'''Output:''' |
'''Output:''' |
||
− | <div class="mw-customtoggle-myDivision" style="color: |
+ | <div class="mw-customtoggle-myDivision mw-customtoggle-myDivision2" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Toggle all Spoiler</div> |
+ | |||
⚫ | |||
+ | |||
+ | <div class="mw-customtoggle-myDivision" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Spoiler 1</div> |
||
+ | |||
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision"> |
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision"> |
||
− | <div class="mw-collapsible-content"> |
+ | <div class="mw-collapsible-content" style="background:rgba(255,255,255,.5);margin-top:10px;padding:10px;border-radius:5px">¡HI! I am a spoiler</div> |
+ | <div class="mw-customtoggle-myDivision2" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Spoiler 2</div> |
||
⚫ | |||
+ | <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision2"> |
||
− | <div class="mw-customtoggle-myDivision" style="color:#070">Clicking will toggle it also!</div> |
||
+ | <div class="mw-collapsible-content" style="background:rgba(255,255,255,.5);margin-top:10px;padding:10px;border-radius:5px">¡HI! I am a spoiler</div> |
||
+ | </div></div> |
||
---- |
---- |
||
− | === |
+ | === Change text for other === |
'''Input:''' |
'''Input:''' |
||
Line 162: | Line 189: | ||
<syntaxhighlight lang="html4strict"> |
<syntaxhighlight lang="html4strict"> |
||
− | <div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:# |
+ | <div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:#c00">Click here to toggle the element</div> |
<div class="mw-collapsible" id="mw-customcollapsible-myFirstText"> |
<div class="mw-collapsible" id="mw-customcollapsible-myFirstText"> |
||
Line 192: | Line 219: | ||
</div> |
</div> |
||
− | <div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:# |
+ | <div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:#0a0">Clicking will toggle it also!</div> |
</syntaxhighlight> |
</syntaxhighlight> |
||
'''Output:''' |
'''Output:''' |
||
− | <div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:# |
+ | <div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:#c00">Click here to toggle the element</div> |
<div class="mw-collapsible" id="mw-customcollapsible-myFirstText"> |
<div class="mw-collapsible" id="mw-customcollapsible-myFirstText"> |
||
Line 236: | Line 263: | ||
</div> |
</div> |
||
− | <div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:# |
+ | <div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:#0a0">Clicking will toggle it also!</div> |
---- |
---- |
||
+ | |||
− | + | == Removing Brackets From Toggle == |
|
The following style rule may be added to the wiki's stylesheet to hide the brackets in the default or custom label toggle links: |
The following style rule may be added to the wiki's stylesheet to hide the brackets in the default or custom label toggle links: |
||
Line 248: | Line 276: | ||
} |
} |
||
</syntaxhighlight> |
</syntaxhighlight> |
||
+ | |||
+ | [[Category:Guides]] |
||
+ | |||
+ | [[fr:Contenu repliable]] |
||
+ | [[tr:Daraltılabilir içerik]] |
||
[[zh:可折叠的内容]] |
[[zh:可折叠的内容]] |
Latest revision as of 10:56, 8 March 2021
For certain situations, having collapsible content areas defined in an article or template may be useful for saving space or improving usability of information in long articles. These may be customized by using certain custom attributes, and combinations of class and id attributes.
You can copy the following templates to your wiki for easy creation of simple collapsible sections:
{{Collapse top}}
{{Collapse bottom}}
Both templates are required. Simply place {{Collapse top}}
above the content to be collapsed, on its own line, and place {{Collapse bottom}}
below the content, also on its own line.
Manual instructions
Adapted from Resource Loader Modules documentation:
- Default toggle link: Add
mw-collapsible
to an element'sclass
attribute with some content and save the page. The inner content of this element will be treated as collapsible content. Prepended to the element, before the collapsible content, is a toggle-link with a localized label (collapsible-expand, collapsible-collapse). To set the initial state to collapsed, addmw-collapsed
to theclass
attribute. - Custom label (HTML5 only): Using the
data-collapsetext
anddata-expandtext
attributes defines custom text for the toggle labels added by the script. This retains the default behavior of the script, but only changes the text used for the toggle links. Some browsers in common use may not support this feature. - Remote toggle: To completely replace the toggle link and explicitly define the content area to be collapsed (which may be different from where the toggle link is placed), add an
id
atribute with a value containing amw-customcollapsible-
prefix for the collapsible element, and a correspondingclass
attribute with amw-customtoggle-
prefix for the toggle link.
Examples
Default toggle link
Input:
{| class="infobox"
! Foo
| Bar
|-
! Lorem
| Ipsum
|-
! More info
|<!--
-->
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! Head
! Top
|-
| Cell
| content
|-
| This table is collapsible
| Because it has the "mw-collapsible" class
|-
| It was initially hidden, because it
| had the "mw-collapsed" class
|}<!--
-->
|-
|}
<div class="toccolours mw-collapsible" style="color:#000;width: 400px;">
This is text is collapsible.
</div>
Output:
Foo | Bar | ||||||||
---|---|---|---|---|---|---|---|---|---|
Lorem | Ipsum | ||||||||
More info |
|
This is text is collapsible.
Custom Label
Input:
{| class="wikitable mw-collapsible mw-collapsed" data-expandtext="+" data-collapsetext="-"
! Column 1 !! Column 2 !! Column 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;">
This text is not hidden
<div class="mw-collapsible-content">
This text is all hidden
And is only shown
When it is uncollapsed.
</div></div>
Output:
Column 1 | Column 2 | Column 3 |
---|---|---|
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
This text is not hidden
This text is all hidden
And is only shown
When it is uncollapsed.
Remote toggle
Input:
<div class="mw-customtoggle-myDivision mw-customtoggle-myDivision2" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Toggle all Spoiler</div>
<div class="mw-customtoggle-myDivision" style="color:#070">Troll div in middle</div>
<div class="mw-customtoggle-myDivision" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Spoiler 1</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision">
<div class="mw-collapsible-content" style="background:rgba(255,255,255,.5);margin-top:10px;padding:10px;border-radius:5px">
¡HI! I am a spoiler
</div>
<div class="mw-customtoggle-myDivision2" style="display:inline-block;background:rgba(128,128,128,0.5);color:white;padding:5px;border-radius:5px;outline:none;user-select:none">Spoiler 2</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-myDivision2">
<div class="mw-collapsible-content" style="background:rgba(255,255,255,.5);margin-top:10px;padding:10px;border-radius:5px">
¡HI! I am a spoiler
</div>
</div></div>
Output:
Change text for other
Input:
<div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:#c00">Click here to toggle the element</div>
<div class="mw-collapsible" id="mw-customcollapsible-myFirstText">
<div class="mw-collapsible-content">
{| class="wikitable"
! Column 1 !! Column 2 !! Column 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%;"
|-
!Row 1 || 1 || 2 || 3
|-
!Row 2 || 4 || 5 || 6
|-
!Row 3 || 7 || 8 || 9
|}
</div>
</div>
<div class="mw-customtoggle-myFirstText mw-customtoggle-myOtherText" style="color:#0a0">Clicking will toggle it also!</div>
Output:
Column 1 | Column 2 | Column 3 |
---|---|---|
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
Row 1 | 1 | 2 | 3 |
---|---|---|---|
Row 2 | 4 | 5 | 6 |
Row 3 | 7 | 8 | 9 |
Removing Brackets From Toggle
The following style rule may be added to the wiki's stylesheet to hide the brackets in the default or custom label toggle links:
span.mw-collapsible-bracket {
display: none;
}