Extension:Details
 リリースの状態: 安定 |
|
|---|---|
| 実装 | タグ |
| 説明 | Semantic, browser-supported collapsible content in MediaWiki articles using <details>, <summary> tags |
| 作者 | Adam Demasi (kirbylover4000トーク) |
| 最新バージョン | 1.2.0 |
| 互換性の方針 | 後方互換性を維持するメイン ブランチ。 |
| MediaWiki | 1.39+ |
|
|
|
<details>, <summary> |
|
| ライセンス | GNU 一般公衆利用許諾書 3.0 以降 |
| ダウンロード | GitHub:
注: README |
| 例 | The Apple Wiki |
Details provides semantic, browser-supported collapsible content in MediaWiki articles using <details>, <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.
インストール
- Downloadして、ファイルを
extensions/フォルダー内のDetailsという名前のディレクトリ内に配置します。 - 以下のコードを LocalSettings.php ファイルの末尾に追加します:
wfLoadExtension( 'Details' );
完了 – ウィキの「Special:Version」に移動して、拡張機能が正しくインストールされたことを確認します。
使用法
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 [開く] and [折り畳む] 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
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:...}}
{{#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
In many cases, it is 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">...</div> or table syntax, which can be split up into multiple templates.
Wikipedia frequently uses {{Collapse top}} and {{Collapse bottom}} to achieve this.
This, however, is not possible with tag extensions, due to the order 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
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
Supports MediaWiki 1.39 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+)
Auto-expanding
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)
- Firefox 139+ (2025)
- Safari Technology Preview 225+ (2025)
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
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