Collapse
This page is a demonstration of collapsible headings in wikipages. The third and fourth headers on this page have collapsible content. The first one sets the content to be hidden when the page is first loaded, while the second has the content initially displayed.
== Header #1 == <div class="mw-collapsible mw-collapsed"> This is more text stored in a collapsible section which is initially collapsed. </div> == Header #2 == <div class="mw-collapsible"> This section is uncollapsed by default. </div>
The content for each header is placed within a <div> element with a class attribute set to "mw-collapsible". If you want to start with the text hidden, add "mw-collapsed" to the class as shown for Header #2.
Contents
Removing table of contents
When using collapsible header system, it might be useful to remove the automatic table of contents. This is done by adding this text to the top of the page:
__NOTOC__
That is "NOTOC" ("no table of contents") surrounded by two underscore characters on each side.
Notes
http://www.mediawiki.org/wiki/Manual:Collapsible_elements
Header #1
This is more text stored in a collapsible section which is initially collapsed.
Subheading
This is a subheader
Subheading 2
This is another subheading
Header #2
This section is uncollapsed by default.
Alternate method of collapsible content
HTML5 includes element tags for collapsible content. This method can also be used. The following code is given as an example:
<html>
<details>
<summary>This is the collapsed view</summary>
This is the content which is not visible when the content is collapsed
</details>
</html>
This is the collapsed view
This is the content which is not visible when the content is collapsed
The <html> wrapper is for mediawiki to not try to escape the necessary elements. HTML wrapping must be enabled in the mediawiki settings in order to use it (don't allow on a publicly editable wiki due to security risks). You can put only the details and summary elements in an html wrapper if you need to use wiki syntax within the contents.
<html><details></html> <html><summary></html>This is the collapsed view<html></summary></html> This is the content which is not visible when the content is collapsed === sub heading === Some text in the subheading. <html></details></html>
This is the collapsed view
This is the content which is not visible when the content is collapsedsub heading
Some text in the subheading
To avoid a box around the summary when it is open, add style="outline:none;" to the summary element:
<html>
<details>
<summary style="outline:none;">This is the collapsed view</summary>
This is the content which is not visible when the content is collapsed
</details>
</html>