GoalStriving Tutorials

Collapse and expand wiki page content: Difference between revisions

← Older edit
VisualWikitext
Matt (talk | contribs)
wiki-owner
65 edits
Matt (talk | contribs)
wiki-owner
65 edits
 
(6 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.
<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed">Click here to view the hidden text below.
<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed">Click here to view the hidden text below.
<div class="mw-collapsible-content">
<div class="mw-collapsible-content">
Line 8: Line 8:
</div>
</div>
</div></syntaxhighlight>
</div></syntaxhighlight>
</div>
</div>
You can also change the word [Expand] used for the text:
You can also change the word [Expand] used for the text:
<syntaxhighlight lang="html>
<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information
<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 text above.
<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">
<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">
Additional information
Additional information
Line 31: Line 32:
  </details></syntaxhighlight>
  </details></syntaxhighlight>
The result behaves like the familiar disclosure/accordion control on modern websites: click the summary and the content opens underneath it.
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>


You can also make it initially open:
This content starts expanded.
<code><details open>
 
<summary>My additional information</summary>
</details>
</syntaxhighlight>
Content here.
 
==== Custom Styles ====
</details></code>
 
<code>wfLoadExtension( 'Details' );</code>
Define reusable CSS classes in [[MediaWiki:Common.css]].
after putting the extension in the <code>extensions/Details</code> directory. MediaWiki
 
<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 ===
=== MediaWiki CollapsibleSections extension ===
Line 166: 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"