Collapse - Revision history

Craig at 05:41, 26 January 2015

2015-01-26T05:41:29Z

← Older revision		Revision as of 05:41, 26 January 2015
Line 1:		Line 1:


	This page is a demonstration of collapsible headings in wikipages. The ~~first 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.		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>

2015-01-26T05:40:49Z

← Older revision		Revision as of 05:40, 26 January 2015
Line 66:		Line 66:


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

2015-01-26T05:38:25Z

← Older revision		Revision as of 05:38, 26 January 2015
Line 1:		Line 1:


	The first 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.		This page is a demonstration of collapsible headings in wikipages. The first 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.

	<pre>		<pre>

2015-01-26T05:37:57Z

← Older revision		Revision as of 05:37, 26 January 2015
Line 1:		Line 1:


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

	<pre>		<pre>

2015-01-26T05:37:32Z

Alternate method of collapsible content

@@ Line 57: / Line 57: @@
      </details>
      &lt;/html&gt;
 <html>
@@ Line 67: / Line 65: @@
 </html>
-To avoid a box around the summary when it is clicked, add style="outline:none;" to the summary element:
      &lt;html&gt;

2015-01-26T05:33:14Z

← Older revision		Revision as of 05:33, 26 January 2015
Line 45:		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:

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

			<html>
			<details>
			<summary>This is the collapsed view</summary>
			This is the content which is not visible when the content is collapsed
			</details>
			</html>

			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>

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

2015-01-21T22:42:35Z

← Older revision		Revision as of 22:42, 21 January 2015
Line 1:		Line 1:
	~~__NOTOC__~~

	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.		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.
Line 19:		Line 19:
	=== Removing table of contents ===		=== Removing table of contents ===

	When using collapsible header system, it ~~is probably best~~ to remove the automatic table of contents. This is done by adding this text to the top of the page:		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>		<pre>

2015-01-21T22:38:29Z

← Older revision		Revision as of 22:38, 21 January 2015
Line 27:		Line 27:
	That is "NOTOC" ("no table of contents") surrounded by two underscore characters on each side.		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 ==

2015-01-21T22:35:25Z

← Older revision		Revision as of 22:35, 21 January 2015
Line 1:		Line 1:
	__NOTOC__		__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.		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.

	<pre>		<pre>

2015-01-21T22:35:14Z

← Older revision		Revision as of 22:35, 21 January 2015
Line 16:		Line 16:

	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.		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 is probably best 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.