Difference between revisions of "Collapse"

From CCARH Wiki
Jump to navigation Jump to search
(Created a demo of collapsing header sections.)
 
Line 1: Line 1:
== <span class="mw-customtoggle-0" style="font-size:small; display:inline-block; float:right;"><span class="mw-customtoggletext">[Show/hide]</span></span> Header ==
+
__NOTOC__
<div  id="mw-customcollapsible-0" class="mw-collapsible mw-collapsed">
 
This is some text stored in a collapsible section.
 
  
</div>
+
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.
 +
 
 +
<pre>
 +
== 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>
 +
</pre>
  
== <span class="mw-customtoggle-1" style="font-size:small; display:inline-block; float:right;"><span class="mw-customtoggletext">[Show/hide]</span></span> 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.
<div id="mw-customcollapsible-1" class="mw-collapsible mw-collapsed">
 
This is more text stored in a collapsible section.
 
  
</div>
 
  
== Header #3 ==
+
== Header #1 ==
 
<div  class="mw-collapsible mw-collapsed">
 
<div  class="mw-collapsible mw-collapsed">
This is more text stored in a collapsible section with a different style.
+
This is more text stored in a collapsible section which is initially collapsed.
 +
=== Subheading ===
 +
This is a subheader
 +
=== Subheading 2 ===
 +
This is another subheading
  
 
</div>
 
</div>
  
== Header #4 ==
+
== Header #2 ==
 
<div  class="mw-collapsible">
 
<div  class="mw-collapsible">
 
This section is uncollapsed by default.
 
This section is uncollapsed by default.
 
</div>
 
</div>

Revision as of 22:32, 21 January 2015


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.

 == 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.


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.