Manual:Collapsible elements

## jQuery.makeCollapsible

*See also jQuery.makeCollapsible documentation for more information about how it works.*
This module is in MediaWiki core by default as of MediaWiki 1.18 and higher. Add the class `mw-collapsible` to any element (div, table, list, anything) to trigger it.

For previous versions of MediaWiki, there are a few alternatives referenced below:

* Collapsible tables: Add a simple class to make a table collapsible
* NavFrame: A small element framework to set up a collapsible structure around any arbitrary content

### Examples

#### Simple

```
<div class="toccolours mw-collapsible" style="width:40em;">
This text is collapsible. {{Lorem}}
</div>

```

Result:

This text is collapsible. Lorem ipsum dolor sit amet, consectetur adipiscing 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}}">`

#### Table

A table can be collapsed like any other element. The difference is that part of the table remains visible, even when collapsed. A table with a caption keeps the caption visible. A table without a caption keeps the first row visible.

```
{| class="mw-collapsible"
! scope="col" | Header 1
! scope="col" | Header 2

{| role="presentation" class="mw-collapsible"

```

Result:

Caption

 dolor

#### With specified initial state

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"
! The header || remains visible

```

 at first | load time

#### With specified collapsible part

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>

```

Result:

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

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

#### With custom toggle link

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>

```

Result:

Toggle link

Toggled text
Additional toggle link

#### As part of an infobox

You can also use collapsible elements into infoboxes, such as seen in the example on the right.

 Title
 Lorem
 More info

 2
 3

### Source

This module ships with MediaWiki by default. You don't need to copy it to a wiki. The source (if you're interested) is in the repository for mediawiki-core (Template:Git file and Template:Git file).

## NavFrame

Template:MW 1.18

https://upload.wikimedia.org/wikipedia/commons/9/98/Wikipedia\_small\_logo\_rounded.png
This page uses Creative Commons licensed content from Wikipedia (view authors).

### Example

```
<div class="NavFrame">
<div class="NavHead">'''Title 1'''</div>
<div class="NavContent">
Hello world.
</div>
</div>

<div class="NavFrame">
<div class="NavHead">'''Title 2'''</div>
<div class="NavContent" style="display: none;">
Hello world.
</div>
</div>

```

Result:

**Title 1**

Hello world.

**Title 2**

Hello world.

### Source

Copy and paste the following text into your wiki's MediaWiki:Common.js and MediaWiki:Common.css

#### JavaScript

```
[[:MediaWiki:Gadget-NavFrame.js]]

```

#### CSS

```
[[:MediaWiki:Gadget-NavFrame.css]]

```

## Collapsible tables

Template:MW 1.18

https://upload.wikimedia.org/wikipedia/commons/9/98/Wikipedia\_small\_logo\_rounded.png
This page uses Creative Commons licensed content from Wikipedia (view authors).

### Example

```
{| class="wikitable collapsible collapsed"
! This is the header cell, which is always shown

```

Result:

### Source

Copy and paste the following text into your wiki's MediaWiki:Common.js (or, if you have Gadgets extension installed, create a gadget for it).

```
[[:MediaWiki:Gadget-collapsibleTables.js]]

```