Collapse and expand wiki page content

This page contains notes on using MediaWiki features that allow you to collapse and expand content sections.

MediaWiki default capabilities

For a block that starts collapsed:

<div class="mw-collapsible mw-collapsed">
<div class="mw-collapsible-content">
This content is hidden initially.

You can put normal wikitext here:
* Item one
* Item two
* Item three
</div>
</div>

mw-collapsible makes the element collapsible, while mw-collapsed makes it start collapsed. MediaWiki then supplies the Expand/Collapse control. MediaWiki

For something more useful, with a visible title:

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

You can also change the words used for the control:

Additional information
<div class="mw-collapsible-content">
This is the hidden content.
</div>
</div>

That functionality is built into MediaWiki's jquery.makeCollapsible module.

MediaWiki Details extension

There is now an Extension:Details extension that I think is particularly worth considering for your personal wiki. It lets you write:

<details>
<summary>My additional information</summary>

Here is the information.

* Item one
* Item two
* Item three

</details>

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:

<details open>
<summary>My additional information</summary>

Content here.

</details>

The Details extension is currently marked stable, supports MediaWiki 1.39+, and uses the browser's semantic <details>/<summary> mechanism. One advantage is that browsers understand the hidden material as actual page content; things such as links to anchors and Find-in-Page can interact with it more intelligently. MediaWiki

Installation is simply:

wfLoadExtension( 'Details' );

after putting the extension in the extensions/Details directory. MediaWiki

MediaWiki CollapsibleSections extension

CollapsibleSections will make every MediaWiki section collapsible, starting at Sub-Heading 1 by default.

Server Configurations

The following commands were added to LocalSettings.php

# CollapsibleSections
wfLoadExtension( 'CollapsibleSections' );

$wgCollapsibleSectionsCollapsedByDefault = false;
$wgCollapsibleSectionsEnableDesktop = true;
$wgCollapsibleSectionsTag = 'h3';

The CollapsibleSections extension has three configuration settings:

• CollapsedByDefault
  • Options: true (default), false
  • This is global for all users and all pages of the wiki
• EnableDesktop
  • Options: true, false (default)
  • When set to false, sections will only be collapsed when viewed on a smartphone or tablet.
• SelectionsTag
  • Options: h2 (default), h3, h4 ~ see chart below
  • The level at which content is collapsed

Ctrl+	VisualEditor Name	Wikitext Sample	HTML Level
0	Paragraph	Normal paragraph text	<p>
1	Page title (not normally used)	= Page title =	<h1>
2	Heading	== Heading ==	<h2>
3	Sub-heading 1	=== Sub-heading 1 ===	<h3>
4	Sub-heading 2	==== Sub-heading 2 ====	<h4>
5	Sub-heading 3	===== Sub-heading 3 =====	<h5>
6	Sub-heading 4	====== Sub-heading 4 ======	<h6>
7	Preformatted	<pre>Preformatted text</pre>	<pre>
8	Block quote	<blockquote>Quoted text</blockquote>	<blockquote>

How to collapse one specific section by default

MediaWiki includes a built-in collapsible-content mechanism through its ResourceLoader jquery.makeCollapsible module.

For example, add the following directly to the wikitext of a page:

Example: A section that starts collapsed

<div class="mw-collapsible mw-collapsed">
 '''Additional Information'''

This information is initially hidden.

It becomes visible when the reader expands the section.
</div>

The important classes are:

• mw-collapsible: Makes the content collapsible.
• mw-collapsed: Makes it initially collapsed.

If you omit mw-collapsed, the content starts expanded.

like tags in wikitext; it does not require you to install another extension. You should test it with your current skin and VisualEditor.

Another option: Native HTML details

Since you're planning to install the Details extension, this may actually be a better approach for selectively collapsing content.

Initially collapsed

<details>
<summary>Additional Information</summary>

This content is initially hidden.

</details>

Initially expanded

<details open>
<summary>Additional Information</summary>

This content is initially visible.

</details>

With the Details extension installed and enabled, this provides a convenient way to manage individual collapsible blocks without changing any global settings.

MediaWiki Spoilers extension

Provides {{#spoiler:...}} https://www.mediawiki.org/wiki/Extension%3ASpoilers?utm_source=chatgpt.com

Its purpose is specifically hiding spoiler-like content. MediaWiki

MediaWiki custom template

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