Soyjak Wiki:Collapsing objects

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 mw-collapsible will be collapse, like so:

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

Content!

mw-collapsed

Elements with the mw-collapsible 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 mw-collapsed class in addition to the mw-collapsible class.

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

Content!

mw-collapsible-content

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

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

Non-collapsible content

Collapsible content

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: data-collapsetext and data-expandtext:

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

Content!

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 mw-customtoggle- class to the element serving as a toggle link or button and add a customized mw-customcollapsible- id to the collapsible content. This method allow the toggle link to be anywhere on the webpage and to be stylized by users.

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

[Toggle link]

Content

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 collapsibletoggletext to them. If you want the content to be initially non-collapsed by default, add the hiddentext class to the "show" link. If you want the content to be initially collapsed by default, add the hiddentext class to the "hide" link and add the mw-collapsed class to the content that is initially collapsed. Have a container element with the collapsibletoggle surround the "show" and "hide" links.

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

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

[Show content][Hide content]

Collapsible content

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

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

[Show content][Hide content]

Collapsible content

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.

{{cs}}: Section

Level 2 collapsing section header.

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

For instance,

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

gives you:

[-+]Test Section One

---

Here's some sample content under a large header.

{{cg}}: Gallery

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

Example:

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

gives you:

Dotjak Gallery

• 
• 
• 
• 

[Collapse GalleryExpand Gallery]

• 
• 
• 
•