Editing 2swagg wiki:Collapsing objects

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

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