Bulgogi2 at 09:16, 15 October 2026

2026-10-15T09:16:47Z

← Older revision		Revision as of 09:16, 15 October 2026
Line 2:		Line 2:
	[[Image:Wtc_005.jpg\|thumb\|right\|upright\|Collapsing objects.]]		[[Image:Wtc_005.jpg\|thumb\|right\|upright\|Collapsing objects.]]

	~~Soyjak~~ Wiki uses [[mediawikiwiki:Manual:Collapsible_elements#jQuery.makeCollapsible\|MediaWiki's jQuery.makeCollapsible module]] and [[MediaWiki:Common.js\|custom scripts]] in order to produce collapsing objects.		2swagg Wiki uses [[mediawikiwiki:Manual:Collapsible_elements#jQuery.makeCollapsible\|MediaWiki's jQuery.makeCollapsible module]] and [[MediaWiki:Common.js\|custom scripts]] in order to produce collapsing objects.

	==Adding classes to elements==		==Adding classes to elements==

Bulgogi2: Created page with " {{Tip|The details tag is now supported, use [https://www.w3schools.com/Tags/tag_details.asp this] where possible.}} Collapsing objects. Soyjak Wiki uses MediaWiki's jQuery.makeCollapsible module and custom scripts in order to produce collapsing objects. ==Adding classes to elements== ===mw-collapsible=== Elements with the class `m..."`


2026-10-15T08:25:02Z
Created page with " {{Tip|The details tag is now supported, use [https://www.w3schools.com/Tags/tag_details.asp this] where possible.}} thumb|right|upright|Collapsing objects.  Soyjak Wiki uses MediaWiki's jQuery.makeCollapsible module and custom scripts in order to produce collapsing objects.  ==Adding classes to elements== ===mw-collapsible=== Elements with the class <code>m..."
New page
 {{Tip|The details tag is now supported, use [https://www.w3schools.com/Tags/tag_details.asp this] where possible.}}

[[Image:Wtc_005.jpg|thumb|right|upright|Collapsing objects.]]



Soyjak Wiki uses [[mediawikiwiki:Manual:Collapsible_elements#jQuery.makeCollapsible|MediaWiki's jQuery.makeCollapsible module]] and [[MediaWiki:Common.js|custom scripts]] in order to produce collapsing objects.



==Adding classes to elements==

===mw-collapsible===

Elements with the class <code>mw-collapsible</code> will be collapse, like so:



<pre style="white-space:pre-wrap;">

<div class="mw-collapsible" style="max-width:300px;">Content!</div>

</pre>



<div class="mw-collapsible" style="max-width:300px;">Content!</div>



===mw-collapsed===

Elements with the <code>mw-collapsible</code> class alone will initially be non-collapsed by default. In order to have an element be initially collapsed by default, the element must possess the <code>mw-collapsed</code> class in addition to the  <code>mw-collapsible</code> class.



<pre style="white-space:pre-wrap;">

<div class="mw-collapsible mw-collapsed" style="max-width:300px;">Content!</div>

</pre>



<div class="mw-collapsible mw-collapsed" style="max-width:300px;">Content!</div>



===mw-collapsible-content===

In order to have a particular element within the element with the <code>mw-collapsible</code> class be collapsible instead of all the contents within the element with the <code>mw-collapsible</code> class, add the <code>mw-collapsible-content</code> class to the element you wish to be collapsible.



<pre style="white-space:pre-wrap;">

<div class="mw-collapsible" style="max-width:300px; border:1px #000 solid; padding:5px;">

Non-collapsible content



<div class="mw-collapsible-content" style="border:1px #000 solid; padding:5px;">Collapsible content</div>

</div>

</pre>



<div class="mw-collapsible" style="max-width:300px; border:1px #000 solid; padding:5px;">

Non-collapsible content



<div class="mw-collapsible-content" style="border:1px #000 solid; padding:5px;">Collapsible content</div>

</div>



==Toggle links==

A couple of options are available when customizing the toggle link for collapsible objects.



===data-collapsetext and data-expandtext===

One method of adding custom text for the toggle text replies on using two special data attributes: <code>data-collapsetext</code> and <code>data-expandtext</code>:



<pre style="white-space:pre-wrap;">

<div class="mw-collapsible mw-collapsed" style="max-width:300px;" data-expandtext="Show" data-collapsetext="Hide">Content!</div>

</pre>



<div class="mw-collapsible mw-collapsed" style="max-width:300px;" data-expandtext="Show" data-collapsetext="Hide">Content!</div>



However, this method has its shortcomings:



*The location of the toggle link is restricted.

*The style of the toggle link cannot be changed.



===mw-customtoggle===

Another method replies on adding a customized <code>mw-customtoggle-</code> class to the element serving as a toggle link or button and add a customized <code>mw-customcollapsible-</code> id to the collapsible content. This method allow the toggle link to be anywhere on the webpage and to be stylized by users.



<pre style="white-space:pre-wrap;">

<span class="mw-customtoggle-customtoggle01" style="color:hotpink; font-weight:bold; cursor:pointer;">[Toggle link]</span>



<div id="mw-customcollapsible-customtoggle01" class="mw-collapsible mw-collapsed" style="max-width:300px; border:1px #000 solid; padding:5px;">Content</div>

</pre>



<span class="mw-customtoggle-customtoggle01" style="color:hotpink; font-weight:bold; cursor:pointer;">[Toggle link]</span>



<div id="mw-customcollapsible-customtoggle01" class="mw-collapsible mw-collapsed" style="max-width:300px; border:1px #000 solid; padding:5px;">Content</div>



====Custom toggle link with toggleable text====

In order to have the toggle link or button change with each click, have a separate element for the "show" link and a separate element for the "hide" link and add the <code>collapsibletoggletext</code> to them. If you want the content to be initially non-collapsed by default, add the <code>hiddentext</code> class to the "show" link. If you want the content to be initially collapsed by default, add the <code>hiddentext</code> class to the "hide" link and add the <code>mw-collapsed</code> class to the content that is initially collapsed. Have a container element with the <code>collapsibletoggle</code> surround the "show" and "hide" links.



The following is an example of a collapsible object that is initially non-collapsed by default:



<pre style="white-space:pre-wrap;">

<span class="mw-customtoggle-customtoggle02 collapsibletoggle" style="color:hotpink; font-weight:bold; cursor:pointer;"><span class="collapsibletoggletext hiddentext">[Show content]</span><span class="collapsibletoggletext">[Hide content]</span></span>



<div id="mw-customcollapsible-customtoggle02" class="mw-collapsible mw-collapsed" style="max-width:300px; border:1px #000 solid; padding:5px;">Collapsible content</div>

</pre>



<span class="mw-customtoggle-customtoggle02 collapsibletoggle" style="color:hotpink; font-weight:bold; cursor:pointer;"><span class="collapsibletoggletext hiddentext">[Show content]</span><span class="collapsibletoggletext">[Hide content]</span></span>



<div id="mw-customcollapsible-customtoggle02" class="mw-collapsible" style="max-width:300px; border:1px #000 solid; padding:5px;">Collapsible content</div>



The following is an example of a collapsible object that is initially collapsed by default:



<pre style="white-space:pre-wrap;">

<span class="mw-customtoggle-customtoggle03 collapsibletoggle" style="color:hotpink; font-weight:bold; cursor:pointer;"><span class="collapsibletoggletext">[Show content]</span><span class="collapsibletoggletext hiddentext">[Hide content]</span></span>



<div id="mw-customcollapsible-customtoggle03" class="mw-collapsible mw-collapsed" style="max-width:300px; border:1px #000 solid; padding:5px;">Collapsible content</div>

</pre>



<span class="mw-customtoggle-customtoggle03 collapsibletoggle" style="color:hotpink; font-weight:bold; cursor:pointer;"><span class="collapsibletoggletext">[Show content]</span><span class="collapsibletoggletext hiddentext">[Hide content]</span></span>



<div id="mw-customcollapsible-customtoggle03" class="mw-collapsible mw-collapsed" style="max-width:300px; border:1px #000 solid; padding:5px;">Collapsible content</div>



==Using Templates==



The templates require you to specify a target class name.  This allows you to extend the functionality of each template by adding more links or content regions to suit your need.  A target class name must be unique to the page and contain no spaces.



==={{tname|cs}}: Section===



Level 2 collapsing section header.



<pre>

{{cs|A|B|C|D}}



A: Unique name to the page, no spaces.  Hint: The section name with no spaces works.

B: The section name.

C: The section content.  May contain nested collapsable sections.

D: The initial state. 0 = collapsed, anything else = expanded.

</pre>



For instance,



<pre>

{{cs|testSectionOne|Test Section One|Here's some sample content under a large header.|0}}

</pre>



gives you:



{{cs|testSectionOne|Test Section One|Here's some sample content under a large header.|0}}



==={{tname|cg}}: Gallery===



<pre>

{{cg|A|B|C|D|E}}



A: Gallery title to be displayed in the black box

B: Unique name to the page.  Hint: The gallery title with no spaces works fine.

C: Horizontal alignment of gallery on page.  "left", "right", or "center".

D: Teaser gallery images.  Must be enclosed in <gallery></gallery> tags and should be a multiple of four images.

E: Remaining gallery images.  Must be enclosed in <gallery></gallery> tags.

</pre>



Example:



<pre>

{{cg|Dotjak Gallery|dotjakgallery|center|<gallery>

<gallery widths="110px" heights="150" perrow="5">

File:Dotjak_calm.gif

File:Dotjak_calm3.gif

File:Dotjak_calm2.gif

File:Dotjak_GigaGoofy.gif

</gallery>|<gallery>

File:Dotjak pepe.gif

File:Dotjak_pepe2.gif

File:Dotjak glowie.gif

File:Dotjak_glowie2.gif

</gallery>}}

</pre>



gives you:



{{cg|Dotjak Gallery|dotjakgallery|center|<gallery>

<gallery widths="110px" heights="150" perrow="5">

File:Dotjak_calm.gif

File:Dotjak_calm3.gif

File:Dotjak_calm2.gif

File:Dotjak_GigaGoofy.gif

</gallery>|<gallery>

File:Dotjak pepe.gif

File:Dotjak_pepe2.gif

File:Dotjak glowie.gif

File:Dotjak_glowie2.gif

</gallery>}}



<br clear="all" />





[[Category:Pages that look like the thing they're about]]

2swagg wiki:Collapsing objects - Revision history

Bulgogi2 at 09:16, 15 October 2026