Collapse and expand wiki page content: Difference between revisions

Line 39:

=== MediaWiki Details extension ===

~~There is now an Extension:~~Details ~~extension~~ that ~~I think~~ is ~~particularly worth considering for your personal wiki~~. ~~It lets you write:~~

The extension Details creates a full width text block that is always exposed

<~~code~~><details>

* Users can click the text or the [Expand] link to display the hidden text.

<summary>~~My additional information~~</summary>

* Formatting options

~~Here~~ is the ~~information~~.

** No formatting on text; cursor is not a pointer hovering on text, but is when hovering over [Expand]

* Item one

** Can only be configured in '''Edit source''' mode.

* Item two

* Item three

<summary>This text is always visible; it can only be one line and must take up the full width.</summary>

</details></~~code~~>

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></syntaxhighlight>

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:

Line 56:

Line 59:

</details></code>

The Details extension is currently marked '''stable''', supports MediaWiki 1.39+, and uses the browser's semantic <code><details></code>/<code><summary></code> mechanism. One advantage is that browsers understand the hidden material as actual page content; things such as links to anchors and Find-in-Page can interact with it more intelligently. MediaWiki

~~Installation is simply:~~

<code>wfLoadExtension( 'Details' );</code>

after putting the extension in the <code>extensions/Details</code> directory. MediaWiki

@@ Line 39: / Line 39: @@
 === MediaWiki Details extension ===
-There is now an Extension:Details extension that I think is particularly worth considering for your personal wiki. It lets you write:
+The extension Details creates a full width text block that is always exposed
-  <code><details>
+* Users can click the text or the [Expand] link to display the hidden text.
-  <summary>My additional information</summary>
+* Formatting options
-  Here is the information.
+** No formatting on text; cursor is not a pointer hovering on text, but is when hovering over [Expand]
-  * Item one
+** Can only be configured in '''Edit source''' mode.
- * Item two
+  <syntaxhighlight lang="html"><details class="wikicollapse">
- * Item three
+  <summary>This text is always visible; it can only be one line and must take up the full width.</summary>
-  </details></code>
+  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></syntaxhighlight>
 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:
@@ Line 56: / Line 59: @@
   </details></code>
-The Details extension is currently marked '''stable''', supports MediaWiki 1.39+, and uses the browser's semantic <code><details></code>/<code><summary></code> mechanism. One advantage is that browsers understand the hidden material as actual page content; things such as links to anchors and Find-in-Page can interact with it more intelligently. MediaWiki
-Installation is simply:
   <code>wfLoadExtension( 'Details' );</code>
 after putting the extension in the <code>extensions/Details</code> directory. MediaWiki