Encyclopedia Dramatica:Collapsing Objects

Collapsing objects.

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

{{co}}: Object

Generic collapsing object. More or less the same as writing out the one-to-one code by hand.

{{co|A|B|C|D|E|F}}

A: Unique name to the page, no spaces.
B: The text to be displayed on the collapse link.
C: The text to be displayed on the expand lnk.
D: The initial state. 0 = collapsed, anything else = expanded.
E: The content to collapse and expand.
F: Style information for the collapsing content.

For instance,

{{co|qwerty|[Collapse Me]|[Expand Me]|1|Here's some stuff.|color: red; background-color: black; padding: 5px;}}

gives you:

[[Collapse Me][Expand Me]]

Here's some stuff.

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

{{cs2}}: Subsection

Level 3 collapsing section header.

{{cs2|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,

{{cs2|testSectionTwo|Test Section Two|Here's some sample content under a small header.|0}}

gives you:

[-+]Test Section Two

Here's some sample content under a small 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|Raid Propaganda|raidPropaganda|center|<gallery>
<gallery widths="110px" heights="150" perrow="5">
File:EndOfFailIcon.png|original image
File:Op-eof.png|Another propaganda img
File:propoganda.png| propaganda image
File:123496873881.png| propaganda
</gallery>|<gallery>
File:At-v2.png |moar propaganda
File:At-v3.png |moar propaganda
File:At-v4.png |moar propaganda
File:AnonResistance.png |original original image
File:AnonAsOneAnonymousAndFree.jpg |moar propaganda
File:AnonAsOneAnonAndFree.png |alt original
File:DefendYouChans.png |moar propaganda
File:LiberateOurChans.png |moar propaganda
File:AThousandAnonDescentUponYou.jpg |moar propaganda
</gallery>}}

</gallery>}}

gives you:

Raid Propaganda About missing Pics

• 
  original image
• Another propaganda img
  Another propaganda img
• propaganda image
  propaganda image
• propaganda
  propaganda

[Collapse GalleryExpand Gallery]

• moar propaganda
  moar propaganda
• moar propaganda
  moar propaganda
• moar propaganda
  moar propaganda
• original original image
  original original image
• moar propaganda
  moar propaganda
• alt original
  alt original
• moar propaganda
  moar propaganda
• moar propaganda
  moar propaganda
• moar propaganda
  moar propaganda

See Also

• Cycling Objects
• Morphing Objects