Template:Collapsible content
Template documentationThis is the documentation page for Template:Collapsible content.
Purpose
This template allows you to provide users the ability to hide or expand content on a wiki page.
The entire content is framed in the table of contents look-and-feel.
Note that using Internet Explorer 9, the collapsed/uncollapsed behavior will not appear when the results are viewed in the preview window. You have to save in order to see it work.
Parameters
| Parameter | Explanation | Notes |
|---|---|---|
|collapsible-content= |
This should contain the text that you want the reader to be able to display or hide, as they prefer. | See below if you want the collapsible content to include a table. |
|collapsed=yes |
Makes collapsible content initially hidden when the page loads. Omit this parameter if you want the collapsible content to display by default. (Optional) | It doesn't matter what value is assigned to this parameter: yes, Yes, true, no, and false all have the same effect. No and false would be misleading for other editors, though, and are discouraged. |
|displayed-content= |
Use this for any introductory text or headers that you want to be displayed at all times, even when the collapsible content is hidden. (Optional) | |
|bg-color= |
Use this to specify a background color for the content, both displayed and expandable. (Optional) | If not specified, the default color will resemble the standard TOC color. |
Examples
| Content displayed by default with the option of user to hide: | |
| What you type | Result |
|---|---|
{{Collapsible content
| displayed-content= This is text that I want displayed to the user at all times
| collapsible-content = This is text that the user can hide if they want to. If the user wants to:
# they can click the "collapse" link on the right
# and then they can click the "expand" link to show the text again
}}
|
This is text that I want displayed to the user at all times This is text that the user can hide if they want to. If the user wants to:
|
| Content hidden by default with the option of user to hide: | |
| What you type | Result |
{{Collapsible content
| collapsed = yes I want the text to be hidden by default
| displayed-content = This is text that I want displayed to the user at all times.
They have to click "expand" link to see the rest of the content.
| collapsible-content = This is text that was hidden by default. If the user wants to:
# they can click the "collapse" link on the right to hide the text
# and then they can click the "expand" link to show the text again
}}
|
This is text that I want displayed to the user at all times. They have to click "expand" link to see the rest of the content. This is text that was hidden by default. If the user wants to:
|
Using Wiki Tables with this template
Using a table inside this template is a special case, because the vertical bar (|) character used in the code for a table is interpreted instead as the start of a new table parameter (this is a common issue with tables inside templates).
One approach to address this issue is to replace the initial {| with <code>{{[[Template:(!|(!]]}}</code>, each subsequent | with <code>{{[[Template:!|!]]}}</code> (including replacing |- with <span style="white-space:nowrap;"><tt>{{!}}</tt></span>-), and the final |} with <code>{{[[Template:!)|!)]]}}</code>.
| ||||||||||
| What you type | Results | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
{{collapsible content
| collapsed = yes
| displayed-content = The content that is hidden includes a table. Click "expand" at right to view the hidden content.
| collapsible-content = This content was hidden, but now it is visible. When expanded, you should see:
* the line above and
* the table below
{{(!}} class="wikitable"
{{!}}+My Table Header
{{!}}-
! scope="col" width=20% {{!}} My Column 1 Header
! scope="col" width=20% {{!}} My Column 2 Header
! scope="col" width=40% {{!}} My Column 3 Header
{{!}}-
{{!}} Row 1, Col 1
{{!}} Row 1, Col 2
{{!}} Row 1, Col 3
{{!}}-
{{!}} Row 2, Col 1
{{!}} Row 2, Col 2
{{!}} Row 2, Col 3
{{!)}}
}}
|
The content that is hidden includes a table. Click "expand" at right to view the hidden content. This content was hidden, but now it is visible. When expanded, you should see:
| |||||||||
| Another approach to put a table inside a collapsible box is to not use the template, but just use the same underlying wiki code that the template uses: | ||||||||||
| What you type | Results | |||||||||
<div class="toccolours mw-collapsible mw-collapsed">
The content that is hidden includes a table. Click "expand" at right to view the hidden content.
<div class="mw-collapsible-content">
This content was hidden, but now it is visible. When expanded, you should see:
* the line above and
* the table below
{| class="wikitable"
|+My Table Header
|-
! scope="col" width=20% | My Column 1 Header
! scope="col" width=20% | My Column 2 Header
! scope="col" width=40% | My Column 3 Header
|-
| Row 1, Col 1
| Row 1, Col 2
| Row 1, Col 3
|-
| Row 2, Col 1
| Row 2, Col 2
| Row 2, Col 3
|}
</div></div>
|
The content that is hidden includes a table. Click "expand" at right to view the hidden content. This content was hidden, but now it is visible. When expanded, you should see:
| |||||||||
A third approach is to use HTML table coding . For this, replace the table start ({|) and table end (|}) with <table>...</table>, place row content inside <tr>...</tr> rather than using |-, add captions inside <caption>...</caption> rather than using |+, and place table cell contents inside <td>...</td> rather than using | and table header cell contents inside <th>...</th> rather than using !:
| ||||||||||
| What you type | Results | |||||||||
{{collapsible content
| collapsed = yes
| displayed-content = The content that is hidden includes a table. Click "expand" at right to view the hidden content.
| collapsible-content = This content was hidden, but now it is visible. When expanded, you should see:
* the line above and
* the table below
<table class="wikitable">
<caption>My Table Header</caption>
<tr>
<th scope="col" width=20%> My Column 1 Header </th>
<th scope="col" width=20%> My Column 2 Header </th>
<th scope="col" width=40%> My Column 3 Header </th>
</tr>
<tr>
<td> Row 1, Col 1 </td>
<td> Row 1, Col 2 </td>
<td> Row 1, Col 3 </td>
</tr>
<tr>
<td> Row 2, Col 1 </td>
<td> Row 2, Col 2 </td>
<td> Row 2, Col 3 </td>
</tr>
</table>
}}
|
The content that is hidden includes a table. Click "expand" at right to view the hidden content. This content was hidden, but now it is visible. When expanded, you should see:
| |||||||||