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 3: Line 3:
=== MediaWiki default capabilities ===
=== MediaWiki default capabilities ===
For a block that starts collapsed:
For a block that starts collapsed:
<code><nowiki><div class="mw-collapsible mw-collapsed"></nowiki>
<syntaxhighlight lang="html><div class="mw-collapsible mw-collapsed">
<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
* Item two
* Item three
<nowiki></div></nowiki>
<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
<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


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


Retrieved from "https://tutorial.goalstriving.org/Collapse_and_expand_wiki_page_content"