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">Click here to view the hidden text below.
<div class="mw-collapsible-content">
This content is hidden until the user clicks the line of text above.
</div>
</div>

You can also change the word [Expand] used for the text:

Additional information

This content is hidden until the user clicks the Shoe more text above.

<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">
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

The extension Details creates a full width text block that is always exposed

• Users can click the text or the [Expand] link to display the hidden text.
• Formatting options
  • No formatting on text; cursor is not a pointer hovering on text, but is when hovering over [Expand]
  • Can only be configured in Edit source mode.

<details class="wikicollapse">
 <summary>This text is always visible; it can only be one line and must take up the full width.</summary>
 This text is only viewable after the user clicks either the text or [Expand] above.  It can include any type or amount of content.
 </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>
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