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 ====
This text is collapsible. {{Lorem}}
Result:
This text is collapsible. 
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:
==== 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"
|+ Caption
|-
! scope="col" | Header 1
! scope="col" | Header 2
|-
| Data 1
| Data 2
|}
{| role="presentation" class="mw-collapsible"
|-
| Lorem
| ipsum
|-
| dolor
| sit
|}
Result:
 Caption
Header 1	Header 2
Data 1 	Data 2
Lorem	ipsum
dolor	sit
==== 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
|-
| This content || is hidden
|-
| at first || load time
|}
The Header 	remains visible
This content	is hidden
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.
This text is not collapsible; but the next is collapsible and hidden by default:
{{Lorem}}
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 mw-customcollapsible and a corresponding class attribute with prefix mw-customtoggle for the collapsible element and the togglelink respectively.
Toggle link
Toggled text
Additional toggle link
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.
My infobox with collapsible info
----	My infobox with collapsible info
----	 	
Title 	Sample	 	
Lorem 	Ipsum 	 	
More info	
{| class="wikitable mw-collapsible mw-collapsed" style="width:100%; margin:0;"	Number	Letter
1 	A 	 	
2 	B 	 	
3 	C 	 	
=== 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 ).
== NavFrame ==
=== Example ===
Title 1
Hello world.
Title 2
Hello world.
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====
====CSS====
== Collapsible tables ==
=== Example ===
{| class="wikitable collapsible collapsed"
|-
! This is the header cell, which is always shown
|-
| This cell is not shown by default.
|}
Result:
This is the header cell, which is always shown
This cell is not shown by default.
=== 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).