See alsojQuery.makeCollapsible documentation for more information about how it works.

See also:Manual:Collapsible elements/Demo/Advanced for more examples.

This module is in MediaWiki core by default as of MediaWiki 1.18 and higher.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 (resources/src/jquery/jquery.makeCollapsible.js andresources/src/jquery/jquery.makeCollapsible.less).

Add the classmw-collapsible to any element (div, table, list, anything) to trigger it.

Since June 2024, collapsible elements work onSkin:Minerva Neue too (phab:T111565).Since July 2025, the built-in search of compatible browsers[1] can find content in collapsed elements too (phab:T327893).

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:

{|class="mw-collapsible"|+ Caption|-! Header 1! Header 2|-| Data 1| Data 2|}

A table without a caption keeps the first row visible:

{|class="mw-collapsible"|-! Lorem! Ipsum|-| dolor| sit|}

Result:

You can addmw-collapsed aftermw-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"!colspan="2"| The header remains visible.|-| This  content|| is hidden|-| at first|| load time|}

{|class="mw-collapsible mw-collapsed wikitable"|+style="white-space: nowrap"| The caption remains visible.|-! Text!! More text|-| This  content|| is hidden|-| at first|| load time|}

You can add a padded border around the caption to make it easier to see that it is a collapsed table:

|+ style="white-space:nowrap; border:1px solid; padding:3px;" | The caption remains visible.

<!-- overflow:auto; to fix collapsed display, because the toggle link has float:right; --><divclass="toccolours mw-collapsible"style="width:400px; overflow:auto;">This text is collapsible. {{Lorem}}</div>

Result:

Using thedata-collapsetext anddata-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:

<divclass="mw-collapsible"data-expandtext="{{int:collapsible-expand}}"data-collapsetext="{{int:collapsible-collapse}}">

<divclass="toccolours mw-collapsible"style="width:400px; overflow:auto;"><divstyle="font-weight:bold;line-height:1.6;">Lorem ipsum sample</div><divclass="mw-collapsible-content">This text is collapsible. {{Lorem}}</div></div>

Result:

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.

<divclass="toccolours mw-collapsible mw-collapsed">This text is not collapsible; but the next is collapsible and hidden by default:<divclass="mw-collapsible-content">{{Lorem}}</div></div>

Result:

You can control where inside the collapsible element the toggle link goes by placing an element with the classmw-collapsible-toggle-placeholder inside it.The placeholder will be completely replaced with a standard toggle link, at the exact position in the DOM where you put the placeholder.See theadvanced demo for an example.

You will want to combine this with a specified collapsible part (seeabove), and put the placeholder outside themw-collapsible-content element, to ensure that the toggle is still reachable in the collapsed state.

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 insideor outside the collapsible element.Its relationship to the collapsible element is detected by using an ID attribute with the prefixmw-customcollapsible and a corresponding class attribute with prefixmw-customtoggle for the collapsible element and the togglelink respectively.

<spanrole="button"class="mw-customtoggle-myDivision">Toggle link</span><divclass="mw-collapsible mw-collapsed"id="mw-customcollapsible-myDivision">Toggled text</div><spanrole="button"class="mw-customtoggle-myDivision">Additional toggle link</span>

Result:

Toggle link

Additional toggle link

You can also use collapsible elements in other elements, such as a table.

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 by editing page "MediaWiki:Common.css".Also edit mobile.css if you are importing jquery.makeCollapsible into mobile.js.For examples seecommon.css,mobile.js, andmobile.css

/* Collapsible elements. Toggle-link moved to left./* Margin around it adjusted. */.mw-collapsiblespan.mw-collapsible-toggle{float:left;margin-left:0;margin-right:1em;}

If you want to hide the brackets in the default or custom label toggle links (for aesthetic or other reasons):

.mw-collapsible-toggle-default:before,.mw-collapsible-toggle-default:after{display:none;}

• en:Help:Table

• Manual