Jump to: navigation, search

Content can be made collapsible with Javascript.

This functionality (unlike sortable tables) is not part of MediaWiki. It depends on the code added by admins to the project's MediaWiki:Common.js.

Collapsible table

To make any table collapsible, add a special class "collapsible".

For example, the following table is defined with {| class="prettytable collapsible" :

Always displayed header
Optionally displayed text; optionally displayed text

Initial state

Collapsible table is initially expanded by default.

You can change this with two additional special classes:

  • autocollapse: table will be collapsed if there are more than 2 collapsible tables on the page,
  • collapsed: table will be initially collapsed.

Example: {|class="prettytable collapsible collapsed"

Table width

It can be convenient to have the hide and show link at the same position: this allows a quick look at the hidden content and hiding it again without moving the mouse cursor in between. This is achieved by explicitly setting width. Otherwise the position of the "show" link is to the left of that of the "hide" link; even if the header would fit in the width of the window the browser might divide it over two lines.

Compare this to the first example: {| class="collapsible prettytable" style="width:90%"

Always displayed header
this table has style="width:90%"; optionally displayed text


For content that is not a table one can create a table with only one element with content, and a header.

For existing table one can simply add collapsible class. If the table has several colums, it might be a good idea to add another top row consisting of one cell. Sometimes it can be beneficial to put the whole table as element inside another table (see example below).

Sortable collapsible table

Sortable table inside a collapsible table:

initially expanded initially collapsed
class="collapsible" class="collapsible collapsed"
name number
a 123
b 6
c 45

If the sortable table is itself made collapsible the positioning of the hide/show button is a bit odd:

initially expanded initially collapsed
class="wikitable sortable collapsible" class="wikitable sortable collapsible collapsed"
name number
a 123
b 6
c 45

Personal customization

Registered users can edit their own monobook.js to change these variables (default values are shown): <source lang=javascript> autoCollapse = 2 //how many collapsible tables on the page before autocollapse works var collapseCaption = 'hide' //text of the [hide] link var expandCaption = 'show' //text of the [show] link </source>

Collapsible Div

This functionality is not implemented on Meta, for information see w:Wikipedia:NavFrame

See also

  • Help:Footnotes - another way of separating "main" and "supplementary" content.