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
 
(14 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>
You can put normal wikitext here:
</div></syntaxhighlight>
* Item one
</div>
* Item two
</div>
* Item three
You can also change the word [Expand] used for the text:
<nowiki></div></nowiki>
<div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">Additional information
<nowiki></div></nowiki></code>
<div class="mw-collapsible-content">This content is hidden until the user clicks the ''Show more'' text above.
<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
<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed" data-expandtext="Show more" data-collapsetext="Show less">
 
Additional information
For something more useful, with a visible title:
<div class="mw-collapsible-content">This is the hidden content.</div>
<code><nowiki><div class="mw-collapsible mw-collapsed"></nowiki>
</div></syntaxhighlight>
My additional information
</div>
<nowiki><div class="mw-collapsible-content"></nowiki>
</div>
Here is all of the additional information that I don't
That functionality is built into MediaWiki's <code>jquery.makeCollapsible</code> module.
want displayed until the reader expands it.
* 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.</div>


=== MediaWiki Details extension ===
=== 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
   
** No formatting on text; cursor is not a pointer hovering on text, but is when hovering over [Expand]
Here is the information.
** Can only be configured in '''Edit source''' mode.
  <syntaxhighlight lang="html"><details class="wikicollapse">
* Item one
  <summary>This text is always visible; it can only be one line and must take up the full width.</summary>
* Item two
  This text is only viewable after the user clicks either the text or [Expand] above.  It can include any type or amount of content.
* Item three
  </details></syntaxhighlight>
   
  </details></code>
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>
 
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
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>


Installation is simply:
Note: Inline CSS may be restricted by MediaWiki's HTML sanitization. For reliable, reusable styling, use CSS classes defined in [[MediaWiki:Common.css]].
<code>wfLoadExtension( 'Details' );</code>
after putting the extension in the <code>extensions/Details</code> directory. MediaWiki


=== MediaWiki CollapsibleSections extension ===
=== MediaWiki CollapsibleSections extension ===
[[mediawikiwiki:Manual:Collapsible_elements|CollapsibleSections]] can make entire MediaWiki sections collapsible, which is useful if you want something like:
[[mediawikiwiki:Manual:Collapsible_elements|CollapsibleSections]] will make every MediaWiki section collapsible, starting at Sub-Heading 1 by default.
<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


==== Server configurations ====
==== Server Configurations ====
The following commands were added to LocalSettings.php
The following commands were added to LocalSettings.php
<syntaxhighlight lang='bash'># CollapsibleSections
<syntaxhighlight lang='bash'># CollapsibleSections
Line 83: Line 159:
$wgCollapsibleSectionsCollapsedByDefault = false;
$wgCollapsibleSectionsCollapsedByDefault = false;
$wgCollapsibleSectionsEnableDesktop = true;
$wgCollapsibleSectionsEnableDesktop = true;
$wgCollapsibleSectionsTag = 'h3';</syntaxhighlight>The CollapsibleSections extension has three configuration settings, all of which you have included in your <code>LocalSettings.php</code>. They control the initial state of sections, whether collapsing works on desktop browsers, and which heading levels are collapsible.
$wgCollapsibleSectionsTag = 'h3';</syntaxhighlight>The CollapsibleSections extension has three configuration settings:


To answer your main question: No, CollapsibleSections does not provide a documented way to make an individual section collapsed by default while leaving all other sections expanded. However, MediaWiki has a built-in feature that can accomplish exactly that.
* 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


== 1. Explanation of the three settings ==
{| class="wikitable"
{| class="wikitable"
!Setting
! Ctrl+
!Values
! VisualEditor Name
!Behavior
! Wikitext Sample
! HTML Level
|-
|-
|<code>$wgCollapsibleSectionsCollapsedByDefault</code>
| 0
|<code>true</code> (default), <code>false</code>
| Paragraph
|<code>true</code>: all targeted sections start collapsed. <code>false</code>: all start expanded.
| <nowiki>Normal paragraph text</nowiki>
| <code>&lt;p&gt;</code>
|-
|-
|<code>$wgCollapsibleSectionsEnableDesktop</code>
| 1
|<code>true</code>, <code>false</code> (default)
| Page title (not normally used)
|Enables or disables CollapsibleSections functionality for desktop browsers.
| <nowiki>= Page title =</nowiki>
| <code>&lt;h1&gt;</code>
|-
|-
|<code>$wgCollapsibleSectionsTag</code>
| 2
|<code>'h2'</code> (default), <code>'h3'</code>, <code>'h4'</code>, etc.
| Heading
|Specifies which HTML heading level is the root level for collapsible sections.
| <nowiki>== Heading ==</nowiki>
|}
| <code>&lt;h2&gt;</code>
These are the three settings documented by the extension's maintainers.
|-
 
| 3
MediaWiki
| Sub-heading 1
 
| <nowiki>=== Sub-heading 1 ===</nowiki>
+1
| <code>&lt;h3&gt;</code>
 
|-
=== Understanding the heading level ===
| 4
MediaWiki's wikitext heading syntax maps to HTML heading levels:
| Sub-heading 2
{| class="wikitable"
| <nowiki>==== Sub-heading 2 ====</nowiki>
!Wikitext
| <code>&lt;h4&gt;</code>
!HTML level
|-
| 5
| Sub-heading 3
| <nowiki>===== Sub-heading 3 =====</nowiki>
| <code>&lt;h5&gt;</code>
|-
|-
|<code>== Heading ==</code>
| 6
|<code>h2</code>
| Sub-heading 4
| <nowiki>====== Sub-heading 4 ======</nowiki>
| <code>&lt;h6&gt;</code>
|-
|-
|<code>=== Heading ===</code>
| 7
|<code>h3</code>
| Preformatted
| <nowiki><pre>Preformatted text</pre></nowiki>
| <code>&lt;pre&gt;</code>
|-
|-
|<code>==== Heading ====</code>
| 8
|<code>h4</code>
| Block quote
| <nowiki><blockquote>Quoted text</blockquote></nowiki>
| <code>&lt;blockquote&gt;</code>
|}
|}
With your configuration:
<code>$wgCollapsibleSectionsTag = 'h3';</code>
You're designating level-three headings as the root level for collapsible sections. This is appropriate because you primarily use <code>=== Heading ===</code> for your wiki's section headings.
The extension can also recognize nested heading structures. However, the exact behavior with nested headings should be tested, especially when changing the root heading level.


== 2. How to collapse one specific section by default ==
==== How to collapse one specific section by default ====
MediaWiki includes a built-in collapsible-content mechanism through its ResourceLoader <code>jquery.makeCollapsible</code> module.
MediaWiki includes a built-in collapsible-content mechanism through its ResourceLoader <code>jquery.makeCollapsible</code> module.


Line 153: Line 244:
If you omit <code>mw-collapsed</code>, the content starts expanded.
If you omit <code>mw-collapsed</code>, the content starts expanded.


You can use this technique even when:
like tags in wikitext; it does not require you to install another extension. You should test it with your current skin and VisualEditor.
<code>$wgCollapsibleSectionsCollapsedByDefault = false;</code>
The global setting applies to CollapsibleSections, whereas <code>mw-collapsed</code> is a separate MediaWiki collapsing mechanism.
 
Note that the code above uses HTML-like tags in wikitext; it does not require you to install another extension. You should test it with your current skin and VisualEditor.


== 3. Another option: Native HTML details ==
==== Another option: Native HTML details ====
Since you're planning to install the Details extension, this may actually be a better approach for selectively collapsing content.
Since you're planning to install the Details extension, this may actually be a better approach for selectively collapsing content.


Line 179: Line 266:
  </details></code>
  </details></code>
With the Details extension installed and enabled, this provides a convenient way to manage individual collapsible blocks without changing any global settings.
With the Details extension installed and enabled, this provides a convenient way to manage individual collapsible blocks without changing any global settings.
== 4. Recommended configuration for your wiki ==
I would keep your current configuration:
<code>wfLoadExtension( 'CollapsibleSections' );
$wgCollapsibleSectionsCollapsedByDefault = false;
$wgCollapsibleSectionsEnableDesktop = true;
$wgCollapsibleSectionsTag = 'h3';</code>
Then use two complementary approaches:
* CollapsibleSections: Make your normal level-three wiki sections collapsible, but expanded by default.
* Details or <code>mw-collapsible</code>: Create individually controlled expandable blocks that start collapsed or expanded as needed.
This provides greater flexibility without changing the default appearance of your existing pages.
One distinction worth emphasizing: A CollapsibleSections section is a genuine MediaWiki heading and participates in the page's heading hierarchy and table of contents. A Details block is an expandable container, not automatically a MediaWiki section. If preserving the heading hierarchy is important, that distinction may influence which approach you choose.


=== MediaWiki Spoilers extension ===
=== MediaWiki Spoilers extension ===
Line 200: 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"