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.

• Slide & Fade will simultaneously slide the content open/close while fading in/out using jQuery .animate()
• Slide Only will only slide the content open/close using jQuery .slideToggle()

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:

Placeholders

Placeholders have been added to version 1.6.3 as a work-around that allows both HTML and shortcodes to be used within the title, swaptitle, startwrap, endwrap, excerpt and swapexcerpt attributes:
%(% = <
%)% = >
%{% = [
%}% = ]
Please view Collapse-O-Matic Excerpt Shortcode Test on spacedonkey for further details on how these are used.

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]

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

Placeholders may be used as a work-around to include shortcodes or HTML in this attribute.

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]

Placeholders may be used as a work-around to include shortcodes or HTML in this attribute.

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]

Trigpos Attribute

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

ID Attribute

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

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:
https://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]

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]

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

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]

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]

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]

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]

Placeholders may be used as a work-around to include shortcodes or HTML in these attributes.

Elwraptag Attribute

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

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]

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]

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

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

Tabindex Attribute

Assigning the tabindex attribute a numerical value will set the trigger element the same tabindex value. As of Collapse-O-Matic version 1.6.4 the default is tabindex="0" and allows the trigger element’s tabindex to be placed in the default navigation order. Initial tests and more information on the tabindex attribute at Collapse-O-Matic Tabindex Test.

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]

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.

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]

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]

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]

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]


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


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]


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.

Nested Highlander Grouped Elements

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

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>

Setall Class

This feature is available in the pro version only.
With Collapse-Pro-Matic the setall class may be applied to any trigger and it will act as an expand/collapse all toggle for all other expand elements on the page.

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>

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]

Placeholders may be used as a work-around to include shortcodes or HTML in this attribute.

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

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]

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]

Placeholders may be used as a work-around to include shortcodes or HTML in this attribute.

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]

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]

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 trigger </span>[/expand]

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>

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>


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>


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>


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.