Encyclopedia Dramatica:Collapsing Objects

Collapsing objects.

The ED wiki is now using the latest version of the Collapsing Objects code originally developed for ED. You will see some familiar concepts, but the syntax and end results have been changed around a great deal. Just like before, you can either write the code yourself (much easier than version 1) or use a template.

Writing the Code

In the previous version of the code, there was a one-to-one ratio between links and collapsing content. This new release allows for greater flexibility in four different ratios.

You pass information to the script using the class tag of the container that will hold the link. Arguments are separated by semicolons and the ordering is mandatory. For instance:

<span class="co;ctext;etext;state;classname;linkcolor"></span>

co - This designates a collapsing object. It is mandatory and case sensitive.

ctext - This is the collapsing link text. It can contain any special characters or spaces except a semicolon.

etext - This is the expanding link text. It can contain any special characters or spaces except a semicolon.

state - This is the initial state. 0 is collapsed; 1 is expanded. God help you if you put a 2.

classname - The target class of this link. See the following sections for an explanation.

linkcolor - Optional parameter that lets you customize the link's color. Don't include the preceeding semicolon if you're not changing the color.

You mark the target object(s) by setting the class equal to classname. For example:

<div class="classname">Content!</div>

One-to-One

This is the standard one link to one content region relationship.

Example:

    What's up?

Code:

<span class="co;[Collapse];[Expand];0;test1"></span>

<span class="test1">What's up?</span>

One-to-Many

This is one link to multiple content regions.

Example:

    What's up?    What's up?

Code:

<span class="co;[Collapse];[Expand];0;test2"></span>

<span class="test2">What's up?</span>

<span class="test2">What's up?</span>

Many-to-One

This is multiple links to one content region.

Example:

    What's up?    

Code:

<span class="co;[Collapse];[Expand];0;test3"></span>

<span class="test3">What's up?</span>

<span class="co;[Collapse];[Expand];0;test3"></span>

Many-to-Many

This is multiple links to multiple content regions.

Example:

    What's up?    What's up?    

Code:

<span class="co;[Collapse];[Expand];0;test4"></span>

<span class="test4">What's up?</span>

<span class="test4">What's up?</span>

<span class="co;[Collapse];[Expand];0;test4"></span>

Changing Link Color

This collapsing link is green.

Example:

    My link is green.

Code:

<span class="co;[Collapse];[Expand];0;test5;green"></span>    <span class="test5">My link is green.</span>

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
C: Horizontal alignment of gallery on page.  "left", "right", or "center".
D: gallery images.  Must be enclosed in <gallery></gallery> tags.

Example:

{{cg|Raid Propaganda|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
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

{{{4}}}

[Collapse GalleryExpand Gallery]

{{{5}}}

See Also

• Morphing Objects