Manual:Collapsible elements/en

jQuery.makeCollapsible

 * See also documentation for more information about how it works.
 * See also: for more examples.

This module is in MediaWiki core by default as of MediaWiki 1.18 and higher. Add the class  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

Simple
Result:

This text is collapsible.

Using the  and   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:

Simple with title
Result:

Lorem ipsum sample This text is collapsible.

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.

Result:

With specified initial state
You can add  after   to have the content collapsed by default when you load the page.

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

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.

Result:

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

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  and a corresponding class attribute with prefix   for the collapsible element and the togglelink respectively. All toggle links with the same suffix will toggle all collapsible elements with the same suffix.

Result:

Toggle link Toggled text Additional toggle link Additional toggled text

As part of an infobox
You can also use collapsible elements in infoboxes, such as seen in the example on the right.

Move toggle link to the left
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. Also in mobile.css if you are importing jquery.makeCollapsible into mobile.js. For examples see common.css, mobile.js, and mobile.css

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 ( and ).

Example
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

Example
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).