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

Click here to view the hidden text below.

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

wfLoadExtension( 'Details' );

Details and Summary

Use <details> and <summary> to create expandable content. The Details extension also supports custom CSS classes for controlling appearance.

Basic Example

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

Hidden content goes here.

</details>

Common Options

Option	Description
open	Initially expanded instead of collapsed.
class="wikicollapse"	Built-in MediaWiki-style collapsible container.
class="simple-details"	Custom minimal styling with a bottom border.
class="highlight-details"	Custom styling with a highlighted heading and border.

Initially Expanded

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

This content starts expanded.

</details>

Custom Styles

Define reusable CSS classes in MediaWiki:Common.css.

/* Minimal styling */
details.simple-details {
    margin: 0.5em 0;
    padding: 0.4em 0;
    border-bottom: 1px solid #c8ccd1;
}

details.simple-details > summary {
    cursor: pointer;
    font-weight: 600;
}

/* Highlighted heading and border */
details.highlight-details {
    margin: 0.5em 0;
    border: 1px solid #a2a9b1;
    border-radius: 5px;
    overflow: hidden;
}

details.highlight-details > summary {
    padding: 10px 12px;
    background: #eaecf0;
    font-weight: 600;
    cursor: pointer;
}

details.highlight-details[open] > summary {
    border-bottom: 1px solid #a2a9b1;
}

Apply a custom class:

<details class="simple-details">
<summary>Additional Information</summary>

Content using minimal styling.

</details>

<details class="highlight-details" open>
<summary>Important Notes</summary>

Content using highlighted styling, initially expanded.

</details>

Inline Styling

For one-time formatting, use the style attribute rather than creating a reusable CSS class.

<details style="border: 1px solid gray; padding: 10px; border-radius: 5px;">
<summary style="font-weight: bold; color: navy;">Additional Information</summary>

Hidden content goes here.

</details>

Note: Inline CSS may be restricted by MediaWiki's HTML sanitization. For reliable, reusable styling, use CSS classes defined in MediaWiki:Common.css.

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 <spoiler show="showMessage" hide="hideMessage">Spoiler Text</spoiler>

<spoiler show="showMessage" hide="hideMessage">Spoiler Text</spoiler>

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