Collapse and expand wiki page content - Revision history

Matt: /* MediaWiki Spoilers extension */

2026-10-15T02:36:45Z

MediaWiki Spoilers extension

← Older revision		Revision as of 22:36, 14 October 2026
Line 272:		Line 272:
	Its purpose is specifically hiding spoiler-like content. MediaWiki		Its purpose is specifically hiding spoiler-like content. MediaWiki
	<spoiler show="showMessage" hide="hideMessage">Spoiler Text</spoiler>		<spoiler show="showMessage" hide="hideMessage">Spoiler Text</spoiler>
	<~~syntaxhighilght~~ lang="html"><spoiler show="showMessage" hide="hideMessage">Spoiler Text</spoiler></syntaxhighlight>		<syntaxhighlight lang="html"><spoiler show="showMessage" hide="hideMessage">Spoiler Text</spoiler></syntaxhighlight>

	=== MediaWiki custom template ===		=== MediaWiki custom template ===
	One other possibility is creating your own <code><nowiki>{{Collapse}}</nowiki></code> template around MediaWiki's built-in functionality. MediaWiki.org itself has a Collapse template with parameters such as <code>title</code>, <code>content</code>, background, alignment, and initial state. MediaWiki		One other possibility is creating your own <code><nowiki>{{Collapse}}</nowiki></code> template around MediaWiki's built-in functionality. MediaWiki.org itself has a Collapse template with parameters such as <code>title</code>, <code>content</code>, background, alignment, and initial state. MediaWiki

Matt: /* MediaWiki Spoilers extension */

2026-10-15T02:35:49Z

MediaWiki Spoilers extension

← Older revision		Revision as of 22:35, 14 October 2026
Line 271:		Line 271:

	Its purpose is specifically hiding spoiler-like content. MediaWiki		Its purpose is specifically hiding spoiler-like content. MediaWiki
			<spoiler show="showMessage" hide="hideMessage">Spoiler Text</spoiler>
			<syntaxhighilght lang="html"><spoiler show="showMessage" hide="hideMessage">Spoiler Text</spoiler></syntaxhighlight>

	=== MediaWiki custom template ===		=== MediaWiki custom template ===
	One other possibility is creating your own <code><nowiki>{{Collapse}}</nowiki></code> template around MediaWiki's built-in functionality. MediaWiki.org itself has a Collapse template with parameters such as <code>title</code>, <code>content</code>, background, alignment, and initial state. MediaWiki		One other possibility is creating your own <code><nowiki>{{Collapse}}</nowiki></code> template around MediaWiki's built-in functionality. MediaWiki.org itself has a Collapse template with parameters such as <code>title</code>, <code>content</code>, background, alignment, and initial state. MediaWiki

Matt: /* MediaWiki default capabilities */

2026-10-15T02:29:51Z

MediaWiki default capabilities

← Older revision		Revision as of 22:29, 14 October 2026
Line 2:		Line 2:

	=== MediaWiki default capabilities ===		=== MediaWiki default capabilities ===
	~~For a block that starts~~ collapsed:		<div class="mw-collapsible mw-collapsed">Click here to view the hidden text below.
	<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed">Click here to view the hidden text below.		<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed">Click here to view the hidden text below.
	<div class="mw-collapsible-content">		<div class="mw-collapsible-content">
Line 8:		Line 8:
	</div>		</div>
	</div></syntaxhighlight>		</div></syntaxhighlight>
			</div>
			</div>
	You can also change the word [Expand] used for the text:		You can also change the word [Expand] used for the text:
	<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information		<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information

Matt: /* MediaWiki Details extension */

2026-10-15T02:27:36Z

MediaWiki Details extension

@@ Line 30: / Line 30: @@
   </details></syntaxhighlight>
 The result behaves like the familiar disclosure/accordion control on modern websites: click the summary and the content opens underneath it.
-You can also make it initially open:
+/* Highlighted heading and border */
- <code><details open>
+details.highlight-details {
- <summary>My additional information</summary>
+    margin: 0.5em 0;
+    border: 1px solid #a2a9b1;
- Content here.
+    border-radius: 5px;
+    overflow: hidden;
- </details></code>
- <code>wfLoadExtension( 'Details' );</code>
-after putting the extension in the <code>extensions/Details</code> directory. MediaWiki
+details.highlight-details > summary {
 === MediaWiki CollapsibleSections extension ===

Matt: /* MediaWiki default capabilities */

2026-10-15T02:14:08Z

MediaWiki default capabilities

← Older revision		Revision as of 22:14, 14 October 2026
Line 10:		Line 10:
	You can also change the word [Expand] used for the text:		You can also change the word [Expand] used for the text:
	<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information		<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information
	<div class="mw-collapsible-content">This content is hidden until the user clicks the ''~~'Shoe~~ more''' text above.		<div class="mw-collapsible-content">This content is hidden until the user clicks the ''Show more'' text above.
	<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">		<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">
	Additional information		Additional information

Matt: /* MediaWiki default capabilities */

2026-10-15T02:13:32Z

MediaWiki default capabilities

← Older revision		Revision as of 22:13, 14 October 2026
Line 10:		Line 10:
	You can also change the word [Expand] used for the text:		You can also change the word [Expand] used for the text:
	<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information		<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information
	<div class="mw-collapsible-content">This content is hidden until the user clicks the text above.		<div class="mw-collapsible-content">This content is hidden until the user clicks the '''Shoe more''' text above.
	<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">		<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">
	Additional information		Additional information

Matt: /* MediaWiki default capabilities */

2026-10-15T02:12:34Z

MediaWiki default capabilities

← Older revision		Revision as of 22:12, 14 October 2026
Line 9:		Line 9:
	</div></syntaxhighlight>		</div></syntaxhighlight>
	You can also change the word [Expand] used for the text:		You can also change the word [Expand] used for the text:
	~~<syntaxhighlight lang="html>~~
	<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information		<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information
	<div class="mw-collapsible-content">This content is hidden until the user clicks the text above.		<div class="mw-collapsible-content">This content is hidden until the user clicks the text above.

Matt: /* MediaWiki default capabilities */

2026-10-15T02:11:17Z

MediaWiki default capabilities

← Older revision		Revision as of 22:11, 14 October 2026
Line 8:		Line 8:
	</div>		</div>
	</div></syntaxhighlight>		</div></syntaxhighlight>
	~~<code>mw-collapsible</code> makes the element collapsible, while <code>mw-collapsed</code> makes it start collapsed. MediaWiki then supplies the Expand/Collapse control. MediaWiki~~

	~~For something more useful, with a visible title:~~
	~~<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed">~~
	~~My additional information~~
	~~<div class="mw-collapsible-content">~~
	~~Here is all of the additional information that I don't~~
	~~want displayed until the reader expands it.~~

	* Item one
	* Item two
	* Item three
	~~</div>~~
	~~</div></syntaxhighlight>~~
	You can also change the word [Expand] used for the text:		You can also change the word [Expand] used for the text:
	<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed"		<syntaxhighlight lang="html>
	data-expandtext="Show more"		<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information
	data-collapsetext="Show less">		<div class="mw-collapsible-content">This content is hidden until the user clicks the text above.
	Additional information		<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">
	<div class="mw-collapsible-content">		Additional information
	This is the hidden content.		<div class="mw-collapsible-content">This is the hidden content.</div>
	</div>		</div></syntaxhighlight>
	</div></~~syntaxhighlight~~>		</div>
	That functionality is built into MediaWiki's <code>jquery.makeCollapsible</code> module.~~</div>~~		</div>
			That functionality is built into MediaWiki's <code>jquery.makeCollapsible</code> module.

	=== MediaWiki Details extension ===		=== MediaWiki Details extension ===

Matt: /* MediaWiki default capabilities */

2026-10-15T02:06:19Z

MediaWiki default capabilities

← Older revision		Revision as of 22:06, 14 October 2026
Line 3:		Line 3:
	=== MediaWiki default capabilities ===		=== MediaWiki default capabilities ===
	For a block that starts collapsed:		For a block that starts collapsed:
	<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed">		<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed">Click here to view the hidden text below.
	<div class="mw-collapsible-content">		<div class="mw-collapsible-content">
	This content is hidden until the user clicks the line of text above.		This content is hidden until the user clicks the line of text above.

Matt: /* MediaWiki default capabilities */

2026-10-15T02:04:21Z

MediaWiki default capabilities

← Older revision		Revision as of 22:04, 14 October 2026
Line 3:		Line 3:
	=== MediaWiki default capabilities ===		=== MediaWiki default capabilities ===
	For a block that starts collapsed:		For a block that starts collapsed:
	<~~code><nowiki~~><div class="mw-collapsible mw-collapsed"~~></nowiki~~>		<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed">
	~~<nowiki>~~<div class="mw-collapsible-content"~~></nowiki~~>		<div class="mw-collapsible-content">
	This content is hidden ~~initially~~.		This content is hidden until the user clicks the line of text above.
			</div>
	~~You can put normal wikitext here:~~		</div></syntaxhighlight>
	* Item one
	* Item two
	* Item three
	~~<nowiki>~~</div~~></nowiki~~>
	~~<nowiki>~~</div></~~nowiki></code~~>
	<code>mw-collapsible</code> makes the element collapsible, while <code>mw-collapsed</code> makes it start collapsed. MediaWiki then supplies the Expand/Collapse control. MediaWiki		<code>mw-collapsible</code> makes the element collapsible, while <code>mw-collapsed</code> makes it start collapsed. MediaWiki then supplies the Expand/Collapse control. MediaWiki

	For something more useful, with a visible title:		For something more useful, with a visible title:
	<~~code><nowiki~~><div class="mw-collapsible mw-collapsed"~~></nowiki~~>		<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed">
	My additional information		My additional information
	~~<nowiki>~~<div class="mw-collapsible-content"~~></nowiki~~>		<div class="mw-collapsible-content">
	Here is all of the additional information that I don't		Here is all of the additional information that I don't
	want displayed until the reader expands it.		want displayed until the reader expands it.
Line 25:		Line 20:
	* Item two		* Item two
	* Item three		* Item three
	~~<nowiki>~~</div~~></nowiki~~>		</div>
	~~<nowiki>~~</div></~~nowiki></code~~>		</div></syntaxhighlight>
	You can also change the word [Expand] used for the text:		You can also change the word [Expand] used for the text:
	<~~code~~><div class="mw-collapsible mw-collapsed"		<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed"
	data-expandtext="Show more"		data-expandtext="Show more"
	data-collapsetext="Show less">		data-collapsetext="Show less">
	Additional information		Additional information
	~~<nowiki>~~<div class="mw-collapsible-content"~~></nowiki~~>		<div class="mw-collapsible-content">
	This is the hidden content.		This is the hidden content.
	~~<nowiki>~~</div~~></nowiki~~>		</div>
	~~<nowiki>~~</div></~~nowiki></code~~>		</div></syntaxhighlight>
	That functionality is built into MediaWiki's <code>jquery.makeCollapsible</code> module.</div>		That functionality is built into MediaWiki's <code>jquery.makeCollapsible</code> module.</div>