GoalStriving Tutorials

Collapse and expand wiki page content: Difference between revisions

← Older editNewer edit →
VisualWikitext
Matt (talk | contribs)
wiki-owner
65 edits
Matt (talk | contribs)
wiki-owner
65 edits
Line 30: Line 30:
  </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>
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;
}


You can also make it initially open:
/* Highlighted heading and border */
<code><details open>
details.highlight-details {
<summary>My additional information</summary>
    margin: 0.5em 0;
    border: 1px solid #a2a9b1;
Content here.
    border-radius: 5px;
    overflow: hidden;
</details></code>
}
<code>wfLoadExtension( 'Details' );</code>
 
after putting the extension in the <code>extensions/Details</code> directory. MediaWiki
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 ===
Retrieved from "https://tutorial.goalstriving.org/Collapse_and_expand_wiki_page_content"