GoalStriving Tutorials

Collapse and expand wiki page content: Difference between revisions

← Older edit
VisualWikitext
Matt (talk | contribs)
wiki-owner
65 edits
No edit summary
Matt (talk | contribs)
wiki-owner
65 edits
 
(18 intermediate revisions by the same user not shown)
Line 2: Line 2:


=== MediaWiki default capabilities ===
=== MediaWiki default capabilities ===
For a block that starts collapsed:
<div class="mw-collapsible mw-collapsed">Click here to view the hidden text below.
  <code><nowiki><div class="mw-collapsible mw-collapsed"></nowiki>
<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed">Click here to view the hidden text below.
  <nowiki><div class="mw-collapsible-content"></nowiki>
<div class="mw-collapsible-content">
  This content is hidden initially.
This content is hidden until the user clicks the line of text above.
</div>
</div></syntaxhighlight>
</div>
</div>
You can also change the word [Expand] used for the text:
<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information
<div class="mw-collapsible-content">This content is hidden until the user clicks the ''Show more'' text above.
<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">
Additional information
<div class="mw-collapsible-content">This is the hidden content.</div>
</div></syntaxhighlight>
</div>
</div>
That functionality is built into MediaWiki's <code>jquery.makeCollapsible</code> 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.
<syntaxhighlight lang="html"><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></syntaxhighlight>
The result behaves like the familiar disclosure/accordion control on modern websites: click the summary and the content opens underneath it.
  <code>wfLoadExtension( 'Details' );</code>
 
=== Details and Summary ===
 
Use <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> to create expandable content. The Details extension also supports custom CSS classes for controlling appearance.
 
==== Basic Example ====
 
<syntaxhighlight lang="html">
<details>
<summary>Additional Information</summary>
 
Hidden content goes here.
 
</details>
</syntaxhighlight>
 
==== Common Options ====
 
{| class="wikitable"
! Option
! Description
|-
| <code>open</code>
| Initially expanded instead of collapsed.
|-
| <code>class="wikicollapse"</code>
| Built-in MediaWiki-style collapsible container.
|-
| <code>class="simple-details"</code>
| Custom minimal styling with a bottom border.
|-
| <code>class="highlight-details"</code>
| Custom styling with a highlighted heading and border.
|}
 
==== Initially Expanded ====
 
<syntaxhighlight lang="html">
<details open>
<summary>Additional Information</summary>
 
This content starts expanded.
 
</details>
</syntaxhighlight>
 
==== Custom Styles ====
 
Define reusable CSS classes in [[MediaWiki:Common.css]].
 
<syntaxhighlight lang="css">
/* Minimal styling */
details.simple-details {
    margin: 0.5em 0;
    padding: 0.4em 0;
    border-bottom: 1px solid #c8ccd1;
}
 
details.simple-details > summary {
    cursor: pointer;
    font-weight: 600;
}
 
/* Highlighted heading and border */
details.highlight-details {
    margin: 0.5em 0;
    border: 1px solid #a2a9b1;
    border-radius: 5px;
    overflow: hidden;
}
 
details.highlight-details > summary {
    padding: 10px 12px;
    background: #eaecf0;
    font-weight: 600;
    cursor: pointer;
}
 
details.highlight-details[open] > summary {
    border-bottom: 1px solid #a2a9b1;
}
</syntaxhighlight>
 
Apply a custom class:
 
<syntaxhighlight lang="html">
<details class="simple-details">
<summary>Additional Information</summary>
 
Content using minimal styling.
 
</details>
 
<details class="highlight-details" open>
<summary>Important Notes</summary>
 
Content using highlighted styling, initially expanded.
 
</details>
</syntaxhighlight>
 
==== Inline Styling ====
 
For one-time formatting, use the <code>style</code> attribute rather than creating a reusable CSS class.
 
<syntaxhighlight lang="html">
<details style="border: 1px solid gray; padding: 10px; border-radius: 5px;">
<summary style="font-weight: bold; color: navy;">Additional Information</summary>
 
Hidden content goes here.
 
</details>
</syntaxhighlight>
 
Note: Inline CSS may be restricted by MediaWiki's HTML sanitization. For reliable, reusable styling, use CSS classes defined in [[MediaWiki:Common.css]].
 
=== MediaWiki CollapsibleSections extension ===
[[mediawikiwiki:Manual:Collapsible_elements|CollapsibleSections]] will make every MediaWiki section collapsible, starting at Sub-Heading 1 by default.
 
==== Server Configurations ====
The following commands were added to LocalSettings.php
<syntaxhighlight lang='bash'># CollapsibleSections
wfLoadExtension( 'CollapsibleSections' );
 
$wgCollapsibleSectionsCollapsedByDefault = false;
$wgCollapsibleSectionsEnableDesktop = true;
$wgCollapsibleSectionsTag = 'h3';</syntaxhighlight>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
 
{| class="wikitable"
! Ctrl+
! VisualEditor Name
! Wikitext Sample
! HTML Level
|-
| 0
| Paragraph
| <nowiki>Normal paragraph text</nowiki>
| <code>&lt;p&gt;</code>
|-
| 1
| Page title (not normally used)
| <nowiki>= Page title =</nowiki>
| <code>&lt;h1&gt;</code>
|-
| 2
| Heading
| <nowiki>== Heading ==</nowiki>
| <code>&lt;h2&gt;</code>
|-
| 3
| Sub-heading 1
| <nowiki>=== Sub-heading 1 ===</nowiki>
| <code>&lt;h3&gt;</code>
|-
| 4
| Sub-heading 2
| <nowiki>==== Sub-heading 2 ====</nowiki>
| <code>&lt;h4&gt;</code>
|-
| 5
| Sub-heading 3
| <nowiki>===== Sub-heading 3 =====</nowiki>
| <code>&lt;h5&gt;</code>
|-
| 6
| Sub-heading 4
| <nowiki>====== Sub-heading 4 ======</nowiki>
| <code>&lt;h6&gt;</code>
|-
| 7
| Preformatted
| <nowiki><pre>Preformatted text</pre></nowiki>
| <code>&lt;pre&gt;</code>
|-
| 8
| Block quote
| <nowiki><blockquote>Quoted text</blockquote></nowiki>
| <code>&lt;blockquote&gt;</code>
|}
 
==== How to collapse one specific section by default ====
MediaWiki includes a built-in collapsible-content mechanism through its ResourceLoader <code>jquery.makeCollapsible</code> module.
 
For example, add the following directly to the wikitext of a page:
 
Example: A section that starts collapsed
  <code><nowiki><div class="mw-collapsible mw-collapsed">
'''</nowiki>Additional Information<nowiki>'''</nowiki>
  This information is initially hidden.
   
   
  You can put normal wikitext here:
  It becomes visible when the reader expands the section.
* Item one
* Item two
* Item three
<nowiki></div></nowiki>
  <nowiki></div></nowiki></code>
  <nowiki></div></nowiki></code>
<code>mw-collapsible</code> makes the element collapsible, while <code>mw-collapsed</code> makes it start collapsed. MediaWiki then supplies the Expand/Collapse control. MediaWiki
The important classes are:
 
* <code>mw-collapsible</code>: Makes the content collapsible.
* <code>mw-collapsed</code>: Makes it initially collapsed.
 
If you omit <code>mw-collapsed</code>, the content starts expanded.


For something more useful, with a visible title:
like tags in wikitext; it does not require you to install another extension. You should test it with your current skin and VisualEditor.
<code><nowiki><div class="mw-collapsible mw-collapsed"></nowiki>
 
My additional information
==== Another option: Native HTML details ====
<nowiki><div class="mw-collapsible-content"></nowiki>
Since you're planning to install the Details extension, this may actually be a better approach for selectively collapsing content.
Here is all of the additional information that I don't
 
want displayed until the reader expands it.
Initially collapsed
   
   
* Item one
* Item two
* Item three
<nowiki></div></nowiki>
<nowiki></div></nowiki></code>
You can also change the words used for the control:
<code><div class="mw-collapsible mw-collapsed"
      data-expandtext="Show more"
      data-collapsetext="Show less">
Additional information
<nowiki><div class="mw-collapsible-content"></nowiki>
This is the hidden content.
<nowiki></div></nowiki>
<nowiki></div></nowiki></code>
That functionality is built into MediaWiki's <code>jquery.makeCollapsible</code> module. MediaWiki
=== 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:
  <code><details>
  <code><details>
  <summary>My additional information</summary>
  <summary>Additional Information</summary>
   
   
  Here is the information.
  This content is initially hidden.
   
   
  * Item one
  </details></code>
* Item two
Initially expanded
* Item three
   
   
</details></code>
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:
  <code><details open>
  <code><details open>
  <summary>My additional information</summary>
  <summary>Additional Information</summary>
   
   
  Content here.
  This content is initially visible.
   
   
  </details></code>
  </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
With the Details extension installed and enabled, this provides a convenient way to manage individual collapsible blocks without changing any global settings.
 
Installation is simply:
<code>wfLoadExtension( 'Details' );</code>
after putting the extension in the <code>extensions/Details</code> directory. MediaWiki
 
=== MediaWiki CollapsibleSections extension ===
[[mediawikiwiki:Manual:Collapsible_elements|CollapsibleSections]] can make entire MediaWiki sections collapsible, which is useful if you want something like:
<code>=== Travel Plans ===
Lots of content...
=== Books to Read ===
Lots more content...</code>
and want each section to collapse from its heading. It can be configured for desktop use and whether sections start collapsed. MediaWiki


=== MediaWiki Spoilers extension ===
=== MediaWiki Spoilers extension ===
Line 80: Line 271:


Its purpose is specifically hiding spoiler-like content. MediaWiki
Its purpose is specifically hiding spoiler-like content. MediaWiki
<spoiler show="showMessage" hide="hideMessage">Spoiler Text</spoiler>
<syntaxhighlight lang="html"><spoiler show="showMessage" hide="hideMessage">Spoiler Text</spoiler></syntaxhighlight>


=== MediaWiki custom template ===
=== MediaWiki custom template ===
One other possibility is creating your own <code><nowiki>{{Collapse}}</nowiki></code> template around MediaWiki's built-in functionality. MediaWiki.org itself has a Collapse template with parameters such as <code>title</code>, <code>content</code>, background, alignment, and initial state. MediaWiki
One other possibility is creating your own <code><nowiki>{{Collapse}}</nowiki></code> template around MediaWiki's built-in functionality. MediaWiki.org itself has a Collapse template with parameters such as <code>title</code>, <code>content</code>, background, alignment, and initial state. MediaWiki
Retrieved from "https://tutorial.goalstriving.org/Collapse_and_expand_wiki_page_content"