Extension:Details
 Release status: stable |
|
|---|---|
| Implementation | Tag |
| Description | Semantic, browser-supported collapsible content in MediaWiki articles using <details> and <summary> tags |
| Author(s) | Adam Demasi (kirbylover4000talk) |
| Compatibility policy | Main branch maintains backward compatibility. |
| MediaWiki | 1.39+ |
| License | GNU General Public License 3.0 or later |
| Download | GitHub: Note: README |
| Example | The Apple Wiki |
|
<details>, <summary> |
|
Details provides semantic, browser-supported collapsible content in MediaWiki articles using <details> and <summary> tags.
The key difference to the traditional mw-collapsible approach is that the browser understands that the details are still content - part of the page that the user may be interested in seeing. 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 scroll-to-text highlights (subject to browser support). By contrast, use of mw-collapsible on content that should be accessible to the user is discouraged, because the content is treated as semantically invisible to these browser features while collapsed, and hence may also be hidden from search engines.
Details attempts to retain compatibility with existing wiki scripts/styles that may expect the class names and behavior of mw-collapsible.
Installation
[edit]- Download and place the file(s) in a directory called
Detailsin yourextensions/folder. - Add the following code at the bottom of your LocalSettings.php file:
wfLoadExtension( 'Details' );
Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.
Usage
[edit]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.
For example:
<details class="wikicollapse">
<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.
By default, no styling is provided. In most cases, you want to use class="wikicollapse". This applies styles similar to a wikitable.
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. Existing styles and scripts built on top of this should mostly work. You will also receive the standard collapsible [Expand] and [Collapse] toggle button, and its location in the DOM can be customised by using the mw-collapsible-toggle-placeholder class.
Articles with collapsible content will be added to the "Pages using Details parser tag" tracking category.
Parameter and template expansion
[edit]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:…}}.
Because it appears to be difficult to optionally specify the open attribute using this approach, as of version 1.1, you can specify "falsy" values to negate (close) by default. A template might use this like:
{{#tag: details
| ...
| open={{#ifeq: {{{expand|}}} | expand | yes | no}}
}}
Multi-part mode
[edit]In many cases, it's useful to wrap a table, conversation, or other large segment of a page in a collapsed block. This is typically possible with mw-collapse, because it can be done with <div class="mw-collapse"> or table syntax, which can be split up into multiple templates. Wikipedia frequently uses {{Collapse top}} and {{Collapse bottom}} to achieve this. This is, however, not possible with tag extensions, due to the method in which MediaWiki parses them.
Details extends the <details> element with a part attribute. It can be used as follows:
<details part="head" class="wikicollapse" />
<summary>Some crazy long content</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ...
<details part="foot" />
This trick appears to not be compatible with Parsoid, which will incorrectly "repair" the HTML fragments produced by this extension.
Configuration
[edit]The following configuration options can be set in LocalSettings.php:
| Variable | Default | Description |
|---|---|---|
$wgDetailsMWCollapsibleCompatibility
|
true
|
Controls whether Details loads CSS and JavaScript to enhance the <details> and <summary> tags. This makes them act similar to mw-collapsible, and introduces the wikicollapse class, which styles much like a wikitable. If disabled, the browser's default styling and behavior is used.
|
Compatibility
[edit]Supports MediaWiki 1.39 and later.
Browser support is required for collapsible content to work:
Fully supported
[edit]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+)
Auto-expanding
[edit]A more recent web platform addition is "hidden until found". This allows an element to be hidden, but still visible to features such find in page and anchor (hash) navigation. The browser reveals the element if relevant content is found in it. This is a desirable feature for hidden sections of an article. However, support is not yet universal:
- Chrome 97+ (2021)
The feature is being tracked for Firefox by Bugzilla bug 1724299, and for Safari by WebKit bug 228843.
As of version 1.1, the extension polyfills support for "hidden until found" for hash anchors. Polyfilling support for find in page and text highlights is unlikely to be possible.
Partially supported
[edit]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
[edit]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