Manual:Collapsible elements

After 1.17

See also jQuery.makeCollapsible documentation for more information about how it works.

Basically all you do is add the class "mw-collapsible" to an element.

My infobox with collapsible info
Title	Sample
Lorem	Ipsum
More info	Number Letter 1 A 2 B 3 C

For example:

<div class="toccolours mw-collapsible" style="width:400px">
This is text is collapsible. {{Lorem}}
</div>

Gives:

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

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

You can so specify a specific part as being the collapsible content

<div class="toccolours mw-collapsible mw-collapsed" style="width:800px">
This is text is not collapsible. But the next is collapsible and is also hidden by default:
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>

Gives:

This is text is not collapsible. But the next is collapsible and is also hidden by default:

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

During 1.17

{insert instructions}

Before 1.17

How to make collapsible tables as seen on the English Wikipedia. This script only applied to tables.

Setup

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

Common.js

/** Collapsible tables *********************************************************
 *
 *  Description: Allows tables to be collapsed, showing only the header. See
 *			   http://www.mediawiki.org/wiki/Manual:Collapsible_tables.
 *  Maintainers: [[en:User:R. Koot]]
 */

var autoCollapse = 2;
var collapseCaption = 'hide';
var expandCaption = 'show';

function collapseTable( tableIndex ) {
	var Button = document.getElementById( 'collapseButton' + tableIndex );
	var Table = document.getElementById( 'collapsibleTable' + tableIndex );

	if ( !Table || !Button ) {
		return false;
	}

	var Rows = Table.rows;

	if ( Button.firstChild.data == collapseCaption ) {
		for ( var i = 1; i < Rows.length; i++ ) {
			Rows[i].style.display = 'none';
		}
		Button.firstChild.data = expandCaption;
	} else {
		for ( var i = 1; i < Rows.length; i++ ) {
			Rows[i].style.display = Rows[0].style.display;
		}
		Button.firstChild.data = collapseCaption;
	}
}

function createCollapseButtons() {
	var tableIndex = 0;
	var NavigationBoxes = new Object();
	var Tables = document.getElementsByTagName( 'table' );

	for ( var i = 0; i < Tables.length; i++ ) {
		if ( hasClass( Tables[i], 'collapsible' ) ) {

			/* only add button and increment count if there is a header row to work with */
			var HeaderRow = Tables[i].getElementsByTagName( 'tr' )[0];
			if ( !HeaderRow ) {
				continue;
			}
			var Header = HeaderRow.getElementsByTagName( 'th' )[0];
			if ( !Header ) {
				continue;
			}

			NavigationBoxes[tableIndex] = Tables[i];
			Tables[i].setAttribute( 'id', 'collapsibleTable' + tableIndex );

			var Button = document.createElement( 'span' );
			var ButtonLink = document.createElement( 'a' );
			var ButtonText = document.createTextNode( collapseCaption );

			Button.className = 'collapseButton'; // Styles are declared in [[MediaWiki:Common.css]]

			ButtonLink.style.color = Header.style.color;
			ButtonLink.setAttribute( 'id', 'collapseButton' + tableIndex );
			ButtonLink.setAttribute( 'href', "javascript:collapseTable(" + tableIndex + ");" );
			ButtonLink.appendChild( ButtonText );

			Button.appendChild( document.createTextNode( '[' ) );
			Button.appendChild( ButtonLink );
			Button.appendChild( document.createTextNode( ']' ) );

			Header.insertBefore( Button, Header.childNodes[0] );
			tableIndex++;
		}
	}

	for ( var i = 0;  i < tableIndex; i++ ) {
		if ( hasClass( NavigationBoxes[i], 'collapsed' ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], 'autocollapse' ) ) ) {
			collapseTable( i );
		} else if ( hasClass( NavigationBoxes[i], 'innercollapse' ) ) {
			var element = NavigationBoxes[i];
			while ( element = element.parentNode ) {
				if ( hasClass( element, 'outercollapse' ) ) {
					collapseTable( i );
					break;
				}
			}
		}
	}
}

addOnloadHook( createCollapseButtons );

/** Test if an element has a certain class **************************************
 *
 * Description: Uses regular expressions and caching for better performance.
 * Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]]
 */

var hasClass = ( function() {
	var reCache = {};
	return function( element, className ) {
		return ( reCache[className] ? reCache[className] : ( reCache[className] = new RegExp( "(?:\\s|^)" + className + "(?:\\s|$)" ) ) ).test( element.className );
	};
})();

Common.css

table.collapsed tr.collapsible {
	display: none;
}

.collapseButton {		/* 'show'/'hide' buttons created dynamically by the		*/
	float: right;		/* CollapsibleTables JavaScript in [[MediaWiki:Common.js]] */
	font-weight: normal;	/* are styled here so they can be customised.		  */
	text-align: right;
	width: auto;
}

Markup

The following markup in pages now makes collapsible sections:

{| class="collapsible collapsed wikitable"
|-
! 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.