Collapse

From CCARH Wiki
Revision as of 05:33, 26 January 2015 by Craig (talk | contribs)
Jump to navigation Jump to search


The two 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.

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>

The <html> wrapper is for mediawiki to not try to escape the necessary elements. You can put only the details and summary elements in an html wrapper if you need to use wiki syntax within the contents.

This is the collapsed view This is the content which is not visible when the content is collapsed

To avoid a box around the summary when it is clicked, 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>

This is the collapsed view This is the content which is not visible when the content is collapsed