Details

Semantic, browser-supported collapsible content in MediaWiki articles using <details> and <summary> tags.

Usage

Simply use the standard <details> and <summary> tags in your wiki content. The <details> element wraps the entire collapsible area, and the <summary> element acts as the expando.

When the browser is requested to jump to content found within a <details> element, it will automatically be expanded. This includes anchors, find in page, and Chrome’s “copy link to highlight” feature.

For example:

<details>
<summary>Some crazy long content</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore …
</details>

All HTML parameters MediaWiki supports on <div> elements are supported on <details> and <summary>. Additionally, you can use <details open> to expand the content by default.

See how it works on GitHub below:

Some crazy long content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The Details extension takes the browser’s native support for <details> further by adding compatibility with jquery.makeCollapsible, better known by its class name, mw-collapsible.

Articles with collapsible content will be added to the Pages using Details parser tag tracking category.

Parameter and template expansion

Because Details is a tag extension, it is expanded before templates and parser functions. As such, if you want to customise parameters on the <details> or <summary> tags, you need to use the {{#tag:…}} parser function:

{{#tag: details
 | {{#tag: summary
  | Some crazy long content
  | class={{{summaryclass|my-summary-class}}}
 }}
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore …
 | class={{{detailsclass|my-details-class}}}
}}

Remember that the content comes before the parameters when using {{#tag:…}}.

Compatibility

Supports MediaWiki 1.41 and later.

Browser support is required for collapsible content to work:

Fully supported

All browsers as of 2017 are fully supported. Specifically, the HTMLDetailsElement toggle event is required to implement the collapse/expand toggle button.

• Chrome 36+ (37+ on Android)
• Firefox 49+
• Safari 10.1+ (iOS 10.3+)

Partially supported

These browsers do not support the toggle event, but will gracefully degrade to using the browser’s built-in toggling functionality. Clicking anywhere within the <summary> row will toggle the contents.

• Chrome 10+ (2011)
• Safari 6.0+ (2012, iOS 6.0+)

No support

These browsers do not support <details> and <summary> at all. Contents of both tags will be displayed as-is.

• Internet Explorer
• EdgeHTML-based Edge (18 and earlier)
• Presto-based Opera (12 and earlier)
• Opera Mini

Installation

Visit Extension:Details on MediaWiki.org for current installation instructions.

Credits

Developed by Chariz for The Apple Wiki:

• Adam Demasi (@kirb)

Partly based on jquery.makeCollapsible, which is part of MediaWiki core.

Huge thanks to alistair3149, who has been super supportive of The Apple Wiki since we started. I used his extension, TabberNeue, as a template for this one.

License

Licensed under the GNU General Public License, version 3.0 or later. Refer to LICENSE.md.