Collapsible content

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's class 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, add mw-collapsed to the class attribute.
• Custom label (HTML5 only): Using the data-collapsetext and data-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 a mw-customcollapsible- prefix for the collapsible element, and a corresponding class attribute with a mw-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	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

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:

Toggle all Spoiler

Troll div in middle

Spoiler 1

¡HI! I am a spoiler

Spoiler 2

¡HI! I am a spoiler

---

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:

Click here to toggle the element

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

Clicking will toggle it also!

---

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