Documentation

Brand: Twinpictures Plugin Oven | Category: WordPress Plugin | Author: Baden Coleman
Updated: 8 October, 2014

Options Page

Collapse-O-Matic Options Page

Collapse-O-Matic Options Page

Collapse-O-Matic version 1.5 introduces a global options page located under the Dashboard > Settings > Collapse-O-Matic. This options page controls the global settings for all Collapse Elements used on the site.

Anyone who wishes to translate the language of this plugin may do so using our Community Translation Tool. All are welcome to join.

Collapse-Pro-Matic, a premium version of Collapse-O-Matic, features expanded options for advanced users.

Style

The Style option selects which css style to load for Collapse-O-Matic. Select the Light style for sites with lighter backgroudns. Select the Dark style for sites with darker backgrounds.

Tag Attribute

HTML tag use to wrap the trigger text. See the Tag Attribute in the shortcode section below for more info.

Collapse/Expand Duration

A string or number determining how long the animation will run. Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The default duration is 400 milliseconds. The strings ‘fast’ and ‘slow’ can be supplied to indicate durations of 200 and 600 milliseconds, respectively. For more details see the jQuery API

Animation Effect

Animation effect to use while collapsing and expanding.

Arrows

Two sets of arrows are included with the plugin. Also included is a PhotoShop .psd file that can be used as a template to create custom arrows. Be sure to back-up any modified files, as they will be overwritten when the plugin is updated. To make update-proof modifications to the arrows, place the new arrow images in the same folder as the theme’s style.css. Then, add the following to your theme’s style.css:

.collapseomatic {
    background-image: url(your_down_arrow_image_here.png) !important;
}
.colomat-close {
    background-image: url(iour_up_arrow_image_here.png) !important;
}

The arrow postion can be set to display right of the trigger assigning the trigclass attribute a value of arrowright. The arrow can be completely removed by assigning the the trigclass a value of noarrow. See the Trigclass Attribute section below for more information.

Visited

As of version 1.4.5, elements that have been clicked will also be assigned a colomat-visited class. To change the appearance of visited links, simply define .colomat-visited in the theme’s style.css like so:

.colomat-visited {
    color: #777;
}

Shortcode

When working with shortcodes on a post or page, it is best to use WordPress’ HTML editor. The Visual editor in WordPress tends to ‘sanitize’ shortcodes, producing undesired results.

Use the [expand] shortcode to create a Collapse-O-Matic element. Each element can further defined by assigning the following attributes to the shortcode:

Title Attribute

Use the title attribute to define the title that triggers the accordion effect. The title attribute is the only required attribute for every expand element.
[expand title="Trigger Text"][/expand]

Trigger Text

Assign target content for the expand element by wrapping the content in shortcode tags.
[expand title="Trigger Text"]Target Content[/expand]

Trigger Text
Target Content

Swaptitle Attribute

The swaptitle attribute is used to ‘swap’ or replace the title when in the expanded state.
[expand title="On" swaptitle="Off"][/expand]
[expand title="Open" swaptitle="Close"]Target Content[/expand]
[expand title="Read More..." swaptitle=" "]Target Content[/expand]

On
Open
Click ‘Close’ to make this text go away.

Read More...

Swapalt Attribute

This feature is available in the pro version only.
Use the swapalt attribute to assign alternate alt and title attributes of the expand element when swaptitle is used.
[expand title="On" swaptitle="Off" swapalt="Turn off the lights!"]Target Content[/expand]

On
The light is bright. Oh so very bright.

Trigpos Attribute

Setting the trigpos attribute to ‘below’ will position the title trigger below the target.
[expand title="Open" trigpos="below"]Target Content[/expand]

What Goes Up

ID Attribute

The id attribute will assign the expand element a specific id tag.
[expand title="Pocket Calculator" id="kraftwerk"]Target Content[/expand]

Pocket Calculator
By pressing down a special key, it plays a little melody.

If no ID attribute is defined, an ID will be automatically assigned a unique, random number. When the optional ID attribute is defined, the id value can be used as a URL anchor to automatically expand the content:
http://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/#kraftwerk

Expanded Attribute

Assigning the expanded attribute a value sets the default positon of the element to open (expanded). The default position is closed (collapsed).
[expand title="Vader" expanded="true"]Target Content[/expand]

Vader
I am your father.

Tag Attribute

The tag attribute replaces the default html tag that wraps the trigger text. By default the html tag is span, however this can be set globally in the Collapse-O-Matic Options Page.
[expand title="A Long Time Ago" tag="h2"]Target Content[/expand]

A Long Time Ago

A long time ago in a galaxy far, far away….

[expand title="<img src='falcon_girl.jpg' />" tag="div" alt="Falcon Girl"]Target Content[/expand]

Check out Falcon Girl by the very talented James Hance

Targtag Attribute

The targtag attribute replaces the default html tag that wraps the target content. By default the html tag is div.
[expand title="A Long Time Ago" targtag="strong"]Target Content[/expand]

A Long Time Ago…in a galaxy far, far away.

Alt Attribute

The alt attribute is used to provide additional information on non-textual screen elements that is used by screen readers and robots. In modern browsers alt text no longer “pops up” on roll-over, the title attribute is now used for this.
[expand title="Imperial Starfleet" alt="Empire Strikes Back"]Target Content[/expand]

Imperial Starfleet
Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth.

Notitle Attribute

The notitle attribute is used completely remove any hover-over text from being displayed.
[expand title="Cloud City" notitle="true"]Target Content[/expand]

Cloud City
Cloud City was an outpost and a tibanna gas mining colony on the planet Bespin, named as such because it was perpetually surrounded by giant clouds.

Startwrap/Endwrap Attributes

The startwrap/endwrap tags are used to wrap a title in extra HTML:
[expand title="Hoth System" startwrap="<strong>" endwrap="</strong>"]Target Content[/expand]

Hoth System
The Hoth System was a remote system along the Ison Trade Corridor, near the Anoat system. Its sixth planet, Hoth was the location of the rebel base in The Empire Strikes Back. It also contained a large and mineral rich asteroid field that was once the site of the Darksaber construction project.

Elwraptag Attribute

The elwraptag attribute is used to wrap the entire collapse element.
<ul>[expand title="Dagobah" elwraptag="li"]Target Content[/expand]</ul>

  • Dagobah
    Dagobah was an Outer Rim planet in the Dagobah system. A remote world of swamps and forests, it served as a refuge for Jedi Grand Master Yoda during his exile, but otherwise had no notable intelligent life.

Elwrapclass Attribute

The elwrapclass attribute is used to assign a class to the elwraptag.
[expand title="Dromund Kaas" elwraptag="div" elwrapclass="blueblaster"]Target Content[/expand]</ul>

Dromund Kaas
Dromund Kaas was the third planet in the Dromund system. It eventually became a colony of the Old Sith Empire, then the capital of the reconstituted Sith Empire and later the lasting base of the Prophets of the Dark Side, whose Dark Force Temple contained such power in the dark side of the Force that most weapons, excluding lightsabers, malfunctioned on the planet’s surface. The site of a major battle during the New Sith Wars under Kaan’s Brotherhood of Darkness, for millennia the planet’s location was known only to a few, very select Sith Lords, falling almost completely out of the public eye.

Trigclass Attribute

The trigclass attribute allows the user to define a custom class for the tag element that wraps the trigger text. This class will be added after the required collapseomatic class that is assigned by default.
[expand title="A New Hope" trigclass="highlight"]Target Content[/expand]

A New Hope
Episode IV, A NEW HOPE. It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.

[expand title="Jedi" trigclass="arrowright"]Target Content[/expand]

Jedi
Thanks to feedback from great users like @Jancie and @Heather, the ability to move the arrow to the right of the trigger-text is now possible.

[expand title="Sith" trigclass="noarrow"]Target Content[/expand]

Sith
Using the noarrow class is useful for images

Targclass Attribute

The targclass attribute allows the user to define a custom class for the div element that wraps the target text. This class will be added after the required collapseomatic_content class that is assigned by default.
[expand title="The Empire Strikes Back" targclass="highlight"]Target Content[/expand]

The Empire Strikes Back
Episode V, THE EMPIRE STRIKES BACK. It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy.

Special Classes

There are a number of special classes that can be assigned using either the trigclass or targclass attributes. Each special class is listed in the table below.

Class Name Assigned By Use
arrowright trigclass places expand/collapse arrows to the right of trigger text
noarrow trigclass removes the expand/collapse arrows
colomat-expand-only trigclass expand elements can be expanded only once and then will remain locked open
maptastic targclass The target content area will not be hidden initially but rather placed off screen to allow other shortcodes such as google maps to render.
colomat-nolink trigclass Anchor ‘a’ tags used as triggers will not fire links if they have been assigned this class.
scroll-to-trigger internal trigger If this class is assigned to an internal collapse trigger, the page will automatically scroll to the expand trigger when clicked.
colomat-visited Trigger This class is automatically applied to any expand element that has been clicked at least once.

Rel Attribute

The rel attribute allows the user to group expand elements by attribute value. Expanding a member of one group will automatically collapse any expanded elements the belong to another group.
[expand title="Star Wars" rel="fiction"]Target Content[/expand]
[expand title="Star Trek" rel="fiction"]Target Content[/expand]
[expand title="Battlestar Galactica" rel="fiction"]Target Content[/expand]
[expand title="Space Race" rel="history"]Target Content[/expand]
[expand title="Ansari X Prize" rel="history"]Target Content[/expand]

Science Fiction

  • Star Wars
    Alliance to Restore the Republic vs. Galactic Empire
  • Star Trek
    United Federation of Planets vs. Klingon Empire vs. Romulan Star Empire vs. Cardassian Union vs. the Borg vs. the Dominion
  • Battlestar Galactica
    Twelve Colonies vs. Cylon Empire

Pure Science

  • Space Race
    USA vs. USSR
  • Ansari X Prize
    Scaled Composites vs. Many Others

Rel Attribute Highlander Grouping

If -highlander is added to all members of a group, then expanding one member will collapse all other members of the same group. Members of other groups will not be affected. Highlander: There can be only one.
[expand title="Monkeys" rel="animal-highlander"]Target Content[/expand]
[expand title="Donkeys" rel="animal-highlander"]Target Content[/expand]

Monkeys
The monkey say Eek! Eek!

Donkeys

The Donkey say Hee Haw

Findme Attribute

Clicking on a highlander grouped link will expand and auto-collapse content, therefore the newly expanded content might be positioned above or below the current scroll. Set the findme attribute to ‘auto’ and the page will auto-scroll to the start of the newly expanded content. Alternatively, the findme attribute can be assigned an exact offset-scroll value.
[expand title="Stars" rel="star-highlander" findme="7070"]Target Content[/expand]
[expand title="Constellations" rel="star-highlander" findme="auto" ]Target Content[/expand]

Stars
ACAMAR
ACHERNAR
Achird
ACRUX
Acubens
ADARA
Adhafera
Adhil
AGENA
Ain al Rami
Ain
Al Anz
Al Kalb al Rai
Al Minliar al Asad
Al Minliar al Shuja
Aladfar
Alathfar
Albaldah
Albali
ALBIREO
Alchiba
ALCOR
ALCYONE
ALDEBARAN
ALDERAMIN
Aldhibah
Alfecca Meridiana
Alfirk
ALGENIB
ALGIEBA
ALGOL
Algorab
ALHENA
ALIOTH
ALKAID
Alkalurops
Alkes
Alkurhah
ALMAAK
ALNAIR
ALNATH
ALNILAM
ALNITAK
Alniyat
Alniyat
ALPHARD
ALPHEKKA
ALPHERATZ
Alrai
Alrisha
Alsafi
Alsciaukat
ALSHAIN
Alshat
Alsuhail
ALTAIR
Altarf
Alterf
Aludra
Alula Australis
Alula Borealis
Alya
Alzirr
Ancha
Angetenar
ANKAA
Anser
ANTARES
ARCTURUS
Arkab Posterior
Arkab Prior
ARNEB
Arrakis
Ascella
Asellus Australis
Asellus Borealis
Asellus Primus
Asellus Secondus
Asellus Tertius
Asterope
Atik
Atlas
Auva
Avior
Azelfafage
Azha
Azmidiske
Baham
Baten Kaitos
Becrux
Beid
BELLATRIX
BETELGEUSE
Botein
Brachium
CANOPUS
CAPELLA
Caph
CASTOR
Cebalrai
Celaeno
Chara
Chort
COR CAROLI
Cursa
Dabih
Deneb Algedi
Deneb Dulfim
Deneb el Okab
Deneb el Okab
Deneb Kaitos Shemali
DENEB
DENEBOLA
Dheneb
Diadem
DIPHDA
Double Double (7051)
Double Double (7052)
Double Double (7053)
Double Double (7054)
Dschubba
Dsiban
DUBHE
Ed Asich
Electra
ELNATH
ENIF
ETAMIN
FOMALHAUT
Fornacis
Fum al Samakah
Furud
Gacrux
Gianfar
Gienah Cygni
Gienah Ghurab
Gomeisa
Gorgonea Quarta
Gorgonea Secunda
Gorgonea Tertia
Graffias
Grafias
Grumium
HADAR
Haedi
HAMAL
Hassaleh
Head of Hydrus
Herschel’s “Garnet Star”
Heze
Hoedus II
Homam
Hyadum I
Hyadum II
IZAR
Jabbah
Kaffaljidhma
Kajam
KAUS AUSTRALIS
Kaus Borealis
Kaus Meridionalis
Keid
Kitalpha
KOCAB
Kornephoros
Kraz
Kuma
Lesath
Maasym
Maia
Marfak
Marfak
Marfic
Marfik
MARKAB
Matar
Mebsuta
MEGREZ
Meissa
Mekbuda
Menkalinan
MENKAR
Menkar
Menkent
Menkib
MERAK
Merga
Merope
Mesarthim
Metallah
Miaplacidus
Minkar
MINTAKA
MIRA
MIRACH
Miram
MIRPHAK
MIZAR
Mufrid
Muliphen
Murzim
Muscida
Muscida
Muscida
Nair al Saif
Naos
Nash
Nashira
Nekkar
NIHAL
Nodus Secundus
NUNKI
Nusakan
Peacock
PHAD
Phaet
Pherkad Minor
Pherkad
Pleione
Polaris Australis
POLARIS
POLLUX
Porrima
Praecipua
Prima Giedi
PROCYON
Propus
Propus
Propus
Rana
Ras Elased Australis
Ras Elased Borealis
RASALGETHI
RASALHAGUE
Rastaban
REGULUS
Rigel Kentaurus
RIGEL
Rijl al Awwa
Rotanev
Ruchba
Ruchbah
Rukbat
Sabik
Sadalachbia
SADALMELIK
Sadalsuud
Sadr
SAIPH
Salm
Sargas
Sarin
Sceptrum
SCHEAT
Secunda Giedi
Segin
Seginus
Sham
Sharatan
SHAULA
SHEDIR
Sheliak
SIRIUS
Situla
Skat
SPICA
Sterope II
Sualocin
Subra
Suhail al Muhlif
Sulafat
Syrma
Tabit (1543)
Tabit (1544)
Tabit (1552)
Tabit (1570)
Talitha
Tania Australis
Tania Borealis
TARAZED
Taygeta
Tegmen
Tejat Posterior
Terebellum
Terebellum
Terebellum
Terebellum
Thabit
Theemim
THUBAN
Torcularis Septentrionalis
Turais
Tyl
UNUKALHAI
VEGA
VINDEMIATRIX
Wasat
Wezen
Wezn
Yed Posterior
Yed Prior
Yildun
Zaniah
Zaurak
Zavijah
Zibal
Zosma
Zuben Elakrab
Zuben Elakribi
Zuben Elgenubi
Zuben Elschemali

Constellations

Andromeda
Antlia
Apus
Aquarius
Aquila
Ara
Aries
Auriga
Boötes
Caelum
Camelopardalis
Cancer
Canes Venatici
Canis Major
Canis Minor
Capricornus
Carina
Cassiopeia
Centaurus
Cepheus
Cetus
Chamaeleon
Circinus
Columba
Coma Berenices
Corona Austrina
Corona Borealis
Corvus
Crater
Crux
Cygnus
Delphinus
Dorado
Draco
Equuleus
Eridanus
Fornax
Gemini
Grus
Hercules
Horologium
Hydra
Hydrus
Indus
Lacerta
Leo
Leo Minor
Lepus
Libra
Lupus
Lynx
Lyra
Mensa
Microscopium
Monoceros
Musca
Norma
Octans
Ophiuchus
Orion
Pavo
Pegasus
Perseus
Phoenix
Pictor
Pisces
Piscis Austrinus
Puppis
Pyxis
Reticulum
Sagitta
Sagittarius
Scorpius
Sculptor
Scutum
Serpens
Sextans
Taurus
Telescopium
Triangulum
Triangulum Australe
Tucana
Ursa Major
Ursa Minor
Vela
Virgo
Volans
Vulpecula

Scrollonclose Attribute

While findme is triggered when the element is expanded, scrollonclose triggers when the element is collapsed. Assign the scrollonclose attribute exact offset-scroll value to scroll the page after the element collapses.
[expand title="Close-n-Scroll" scrollonclose="7000"]Closing this will auto scroll the element to 7000 pixels from the top.[/expand]

Close-n-Scroll
Closing this will auto scroll the element to 7000 pixels from the top of the page.

[expand title="Close-n-Scroll Auto" scrollonclose="auto"]Closing this should auto scroll the page so the element is displayed at the top of the page.[/expand]

Close-n-Scroll Auto
Closing this should auto scroll the page so the element is displayed at the top of the page.

Nested Expand Elements

Expand elements can be nested up to 30 levels deep using the shortcodes: expandsub1 – expandsub30.
[expand title="Root Level"]
   [expandsub1 title="Nested Level 1"]
      [expandsub2 title="Nested Level 2"]
         [expandsub3 title="Nested Level 3"]
           [expandsub4 title="Nested Level 4"]
             [expandsub5 title="Nested Level 5"]
               [expandsub6 title="Nested Level 6"]
                 [expandsub7 title="Nested Level 7"]
                 [/expandsub7]
               [/expandsub6]
             [/expandsub5]
           [/expandsub4]
         [/expandsub3]
      [/expandsub2]
   [/expandsub1]
[/expand]

Root Level
Nested Level 1
Nested Level 2
Nested Level 3
Nested Level 4
Nested Level 5
Nested Level 6
Nested Level 7
You win a cracker jack prize!

Grouping Nested Elements

Using nested expand elements with grouping can be complex. Below is an examples of how nested elements might be used in a navigation menu. Notice how the first menu item uses highlander grouping for the nested elements, while the second menu item does not.

[expand title="Fiction" rel="fiction"]
  [expandsub2 title="Star Wars" rel="submenu-highlander"]Target Content[/expandsub2]
  [expandsub2 title="Star Trek" rel="submenu-highlander"]Target Content[/expandsub2]
  [expandsub2 title="Battlestar Galactica" rel="submenu-highlander"]Target Content[/expandsub2]
[/expand]
[expand title="History" rel="history"]
  [expandsub2 title="Space Race"]
    [expandsub3 title="Moon Landing"]Target Content[/expandsub3]
  [/expandsub2]
  [expandsub2 title="Ansari X Prize"]Target Content[/expandsub2]
[/expand]

Since the nested elements of the first group: “Fiction” is using highlander grouping, only a single nested element is allowed to be open at a time. The second group: “History” does not use highlander grouping, allowing multiple elements on the same level to be open simultaneously.

Fiction
Star Wars
Target Content

Star Trek

Target Content

Battlestar Galactica

Target Content

History

Space Race
The Moon
This is some funky moon rocket text.

Ansari X Prize

Target Content

Nested Highlander Grouped Elements

Here is an example of deeply nested elements using highlander grouping.

Fiction
Star Wars
Rebels
Skywalker
Luke
Droids
R2D2
Beep Boo Bop Beep

C3PO

Master Luke!

Light Saber

WaaaaWaaaooe Wap-Waaaaa

Leah

I am going Solo!

Knobi

Obi Wan Knobi

Empire

The Dark Side of the Force

Star Trek

Target Content

Battlestar Galactica

Target Content

Expand / Collapse All Triggers

Expand and collapse all elements with one trigger. The triggers may be any type of HTML tag as long as they have a class of either expandall or collapseall.
<span class="expandall">Expand All</span>
<span class="collapseall">Collapse All</span>

Expand All
Collapse All

Expand / Collapse All Grouped

Expand and collapse all elements belonging to the same group with one trigger. The triggers may be any type of HTML tag as long as they have a class of either expandall or collapseall and the same rel attribute of the target group.
<span class="expandall" rel="fiction">Expand All</span>
<span class="collapseall" rel="fiction">Collapse All</span>

Expand All Fiction
Collapse All Fiction

Excerpt Attribute

Use the excerpt attribute to display a teaser, or short nibble of text that hints at the content of the collapsed target text.
[expand title="Laugh It Up, Fuzzball" excerpt="Laugh It Up, Fuzzball: The Family Guy Trilogy"]Target Content[/expand]

Laugh It Up, Fuzzball
Laugh It Up, Fuzzball: The Family Guy Trilogy
Three episode specials from the American animated television series Family Guy. The episodes are a remake parody of the original Star Wars films.

Excerptpos Attribute

Use the excerptpos attribute to reposition the excerpt.
[expand title="Harvest Moon" excerpt="The Family Guy - Blue Harvest" excerptpos="above-trigger"]Target Content[/expand]

The Family Guy - Blue Harvest

Blue Harvest

An hour-long premiere to the sixth season of the Family Guy and the first part of the series’ trilogy Laugh It Up, Fuzzball.

The excerpt can be positioned in one of three locations:

  • above-trigger
  • below-trigger (default)
  • below-target

Excerptclass Attribute

The excerptclass attribute adds a class to the html element tag that wraps the excerpt text. This class will be added after the required collapseomatic_excerpt class that is assigned by default.
[expand title="Something, Something, Something, Dark Side" excerpt="The Family Guy parody of The Empire Strikes Back" excerptclass="highlight"]Target Content[/expand]

Something, Something, Something, Dark Side
The Family Guy parody of The Empire Strikes Back
Season finale of the eighth season of the animated comedy series Family Guy and part of the series’s trilogy Laugh It Up, Fuzzball.

Excerpttag Attribute

The excerpttag attribute replaces the default div tag that wraps the excerpt text.
[expand title="It's a Trap!" excerpt="The Family Guy parody of Return of the Jedi" excerpttag="h2"]Target Content[/expand]

It's a Trap!

The Family Guy parody of Return of the Jedi

It’s a Trap! is a double-episode season finale of the ninth season of the animated series Family Guy and the final part of the series’ trilogy Laugh It Up, Fuzzball.

Swapexcerpt Attribute

The swapexcerpt attribute is used to ‘swap’ or replace the excerpt when in the expanded state.
[expand title="Millennium Falcon" excerpt="Owner: Hans Solo" swapexcerpt="Previous Owner: Lando Calrissian"]Target Content[/expand]

Millennium Falcon
Owner: Hans Solo
Han Solo won the Falcon from fellow rogue Lando Calrissian in a hand of the card game sabacc.[9] In A New Hope, Obi-Wan Kenobi (Alec Guinness) and Luke Skywalker charter the ship to deliver them, C-3PO (Anthony Daniels), R2-D2 (Kenny Baker), and the stolen Death Star plans to Alderaan. Skywalker calls the ship “a piece of junk”, but Solo counters by noting that the ship “may not look like much, but she’s got it where it counts.”

Targpos Attribute

The targpos attribute us used to change the position of the target content. Currently the only accepted value is ‘inline’. For best results, targpos should be used when both excerpt has been defined, and targtag is a non-block element, such as span.
[expand title="Laugh It Up, Fuzzball" excerpt="Laugh It Up, Fuzzball: The Family Guy Trilogy" targtag="span" targpos="inline"]. Target Content[/expand]

Laugh It Up, Fuzzball
Laugh It Up, Fuzzball: The Family Guy Trilogy. Three episode specials from the American animated television series Family Guy. The episodes are a remake parody of the original Star Wars films.

Internal Collapse Trigger

[expand title="R2 may have been stolen" id="stolenr2"]Target Content <span class="collapseomatic colomat-close" id="bot-stolenr2">click here to close</span>[/expand]

R2 may have been stolen
I stumbled across a recording while I was cleaning him. He says that he belongs to someone named Obi-Wan Kenobi. I thought he might have meant old Ben. Do you know what he’s talking about?
click here to close

A second trigger element can be placed anywhere within the expanded content that will trigger a collapse. To accomplish this:

  1. The expand tag must have a defined ID
  2. The second internal trigger element must be assigned a class of collapseomatic
  3. To have the arrow point up, rather than down, add the class of colomat-close to the second trigger element
  4. The bottom trigger element must have and ID that is the same as the trigger pre-appended with “bot-“. For example: if the trigger has an ID of “r2d2″ then the second trigger id must look like: id=”bot-r2d2″.

Internal Collapse Trigger & Scroll On Close

[expand title="R2D2 Wiki" id="r2d2wiki"]Target Content <span class="collapseomatic colomat-close scroll-to-trigger" id="bot-r2d2wiki">click here to close & scroll to triggere</span>[/expand]

R2D2 Wiki
R2-D2 (phonetically spelled Artoo-Detoo, and called “R2″ or “Artoo” for short) is a robot character in the Star Wars universe. An astromech droid (referred to in the novel as a ‘thermocapsulary dehousing assister’), R2-D2 is a major character in all six Star Wars films. Along with his protocol droid companion C-3PO, he joins or supports Anakin Skywalker, Luke Skywalker, Princess Leia, and Obi-Wan Kenobi in various points in the saga. R2-D2 was played by Kenny Baker. Along with Anakin Skywalker (Darth Vader), Obi-Wan Kenobi, and C-3PO, he is one of only four characters to appear in all six Star Wars films.
R2-D2 was designed by John Stears and Tony Dyson specially created by Australian firm Petric Engineering and English firm C&L Developments. Many scenes also made use of radio controlled and CGI versions of the character. Both the original props of R2-D2 and C-3PO used in filming are used as audio-animatronics in the queue area of Disneyland’s Star Tours ride.

Design

George Lucas’s creation of R2-D2 was influenced by Akira Kurosawa’s 1958 feature film The Hidden Fortress (USA release 1962), particularly Tahei and Matakishi, the two comic relief characters that serve as sidekicks to General Makabe. Lucas also drew inspiration from the robots Huey, Dewey, and Louie from Douglas Trumbull’s 1972 film Silent Running.
The name is said to derive from when Lucas was making one of his earlier films, American Graffiti. Sound editor Walter Murch states that he is responsible for the utterance which sparked the name for the droid. Murch asked for Reel 2, Dialog Track 2, in the abbreviated form “R-2-D-2″. Lucas, who was in the room and had dozed off while working on the script for Star Wars, momentarily woke when he heard the request and, after asking for clarification, stated that it was a “great name” before falling immediately back to sleep.[1]
R2-D2 stands for Second Generation Robotic Droid Series-2, according to a Star Wars encyclopedia published after the release of the film Star Wars: A New Hope.

Original trilogy

In Star Wars Episode IV: A New Hope, both R2-D2 and C-3PO are introduced on board the Tantive IV, along with Princess Leia of Alderaan, when they are fired upon by an Imperial Star Destroyer. Leia jams inside an opening in R2-D2 an information disc containing the plans for the Death Star battle station, along with encoding a distress message on the droid’s holographic projector. The droids then escape in a pod that crashes on Tatooine near Kenobi’s desert abode.
R2-D2 and C-3PO are then abducted by Jawas and bought by Owen Lars, step-uncle of Luke Skywalker. While Luke cleans the sand out of R2-D2’s gears, he discovers a fragment of Leia’s message, and removes the droid’s restraining bolt to see more; once free of the bolt, R2 claims to have no knowledge of the message. That night, R2 leaves the farm to seek out Obi-Wan Kenobi. Soon, by way of fate, Luke is forced to leave Tatooine with Obi-Wan, Han Solo, and Chewbacca, and they attempt to deliver R2-D2 to the Rebel Alliance. Along the way, they are pulled in by the Death Star’s tractor beam, but eventually rescue Princess Leia and escape. R2-D2 delivers the plans to the Rebel Alliance, and becomes Luke’s astromech droid during the attack on the station. R2 is severely damaged during the battle, but is restored before the ceremony at the end of the film.
In Star Wars Episode V: The Empire Strikes Back, R2-D2 accompanies Luke to Dagobah, and later to Cloud City, where he helps to rescue and repair a heavily damaged C-3PO and to override city security computers. He also manages to fix the Millennium Falcon’s hyperdrive, resulting in a last-minute escape from Imperial forces.
In Star Wars Episode VI: Return of the Jedi, R2-D2 plays a critical role in the rescue of Han, Luke and Leia from Jabba the Hutt, and later joins the Rebel strike team on Endor. He is badly damaged during the fight between the Imperial troops and the Rebels, but is repaired in time for the celebration marking the second Death Star’s destruction.
R2-D2 is male, as far as by state of androids. In A New Hope, Obi-Wan Kenobi states in gender specific, “Plug-in, he should be able to interpret the entire Imperial network.”
Source: Wikipedia
click here to close & scroll to trigger

Often it is useful to use an internal collapse trigger because there is a large amount of content. Therefore, it may also be useful to have the page automatically scroll to the main trigger text when the bottom trigger is clicked. To do this, simply add the scroll-to-trigger class to the bottom trigger element.

Extra External Triggers

<div id="test" class="collapseomatic">Trigger 1</div>
<div id="target-test" class="collapseomatic_content">You might think you can catch a monkey, but you can't. Monkeys are FAST!</div>
<div id="extra1-test" class="collapseomatic">Trigger 2</div>
<div id="extra2-test" class="collapseomatic">Trigger 3</div>

Trigger 1
You might think you can catch a monkey, but you can’t. Monkeys are FAST!
Trigger 2
Trigger 3

Multiple triggers can be used for the same target. This works only for roll-your-own collapse elements. The extra collapse element must:

  • Have a defined id in the format of ‘extra[n]-orginal_id
  • Contain a class of ‘collapseomatic’

Multiple Targets

This feature is available in the pro version only.
<div id="target1-test" class="collapseomatic_content">You might think you can catch a monkey, but you can't. Monkeys are FAST!</div>
<div id="test" class="collapseomatic">Trigger</div>
<div id="target2-test" class="collapseomatic_content">Monkeys are still very FAST!</div>

A trigger can be used to expand/collapse multiple targets. This is a Collapse-Pro-Matic feature only, and must be implemented using the roll-your-own method. The extra target elements must:

  • Have a defined id in the format of ‘target[n]-orginal_id
  • Contain a class of ‘collapseomatic_content’

Roll Your Own Collapse Elements

With the plugin installed, any two elements can be rolled into a triger/target collapse-o-matic pair. To roll-your-own collapse elements, simply keep the following in mind:

  1. The trigger element has to be wrapped in an element with the class of “collapseomatic” and a unique id.
  2. The target element must have an ID that is the same as the trigger pre-appended with “target-“. For examaple: if the trigger has an ID of “kraftwerk” then the matching target ID must look like: id=”target-kraftwerk”.

A roll-your-own example that places the trigger below the target:


<div id="target-monkey1" class="collapseomatic_content">You might think you can catch a monkey, but you can't. Monkeys are FAST!</div>
<span class="collapseomatic" title="Fast Monkey" id="monkey1" >Fast Monkey</span>
<span id="swap-monkey1" style="display: none;">Eek Eek</span>

You might think you can catch a monkey, but you can’t. Monkeys are FAST!

Fast Monkey

A roll-your-own example that places the trigger below the target:


<div id="target-monkey1" class="collapseomatic_content">You might think you can catch a monkey, but you can't. Monkeys are FAST!</div>
<span class="collapseomatic" title="Fast Monkey" id="monkey1" >Fast Monkey</span>
<span id="swap-monkey1" style="display: none;">Eek Eek</span>

You might think you can catch a monkey, but you can’t. Monkeys are FAST!

Fast Monkey

A roll-your-own example that uses the Findme feature


<a id='find-donkey2' name=''></a>
<span class="collapseomatic find-me" title="Slow Donkey" id="donkey2" >Slow Donkey</span>
<div id="target-donkey2" class="collapseomatic_content">Donkeys are not so fast.</div>

Donkeys are not so fast.

Slow Donkey

Additional roll-your-own examples

For more examples of rolling your own collapse elements, check out Terryago’s excellent post on the WordPress Forums: Roll your own Elements Ideas.