Collapse and expand wiki page content

From GoalStriving Tutorials
Jump to navigation Jump to search

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 word [Expand] used for the text: 

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

Retrieved from "https://tutorial.goalstriving.org/index.php?title=Collapse_and_expand_wiki_page_content&oldid=67"