Manual:Collapsible elements

jQuery.makeCollapsible

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

Add the class " " to an element.

For example: Gives: This text is collapsible.

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

You can specify which part is the collapsible content.

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

Common.js script (before 1.18)
Note that Mediawiki 1.18 and above will ignore this code.

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:

/** 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

Markup
The following markup in pages now makes collapsible sections:


 * Result: