Difference between revisions of "Collapse"

From CCARH Wiki
Jump to navigation Jump to search
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
__NOTOC__
 
  
−
The two headers on this page has 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.
+
 
 +
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.
  
 
<pre>
 
<pre>
Line 17: Line 17:
 
The content for each header is placed within a &lt;div&gt; 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.
 
The content for each header is placed within a &lt;div&gt; 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:
 +
 +
<pre>
 +
  __NOTOC__
 +
</pre>
 +
 +
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 ==
 
== Header #1 ==
Line 32: Line 45:
 
This section is uncollapsed by default.
 
This section is uncollapsed by default.
 
</div>
 
</div>
 +
 +
 +
== 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:
 +
 +
    &lt;html&gt;
 +
    <details>
 +
    <summary>This is the collapsed view</summary>
 +
    This is the content which is not visible when the content is collapsed
 +
    </details>
 +
    &lt;/html&gt;
 +
 +
<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 &lt;html&gt; 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.
 +
 +
 +
    &lt;html&gt;<details>&lt;/html&gt;
 +
    &lt;html&gt;<summary>&lt;/html&gt;This is the collapsed view&lt;html&gt;</summary>&lt;/html&gt;
 +
    This is the content which is not visible when the content is collapsed
 +
    === sub heading ===
 +
    Some text in the subheading.
 +
    &lt;html&gt;</details>&lt;/html&gt;
 +
 +
<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>
 +
 +
To avoid a box around the summary when it is open, add style="outline:none;" to the summary element:
 +
 +
    &lt;html&gt;
 +
    <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>
 +
    &lt;/html&gt;
 +
 +
<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>

Latest revision as of 05:41, 26 January 2015


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.

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 collapsed

sub 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>

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

Retrieved from "https://wiki.ccarh.org/index.php?title=Collapse&oldid=5684"