Title Attribute

The title attribute is used to define the clickable text use to trigger the accordion effect. The title attribute is the only required attribute for an expand element.

Examples

[expand title="Trigger Text"][/expand]

To assign target content for the expand element, wrapping the content within the shortcode tags like so:

[expand title="Trigger Text"]Target Content[/expand]

Placeholders may be used as a work-around to include shortcodes or HTML inside the title attribute.

Swaptitle Attribute

The swaptitle attribute is used to ‘swap’ or replace the title while in the expanded state.

Examples

[expand title="On" swaptitle="Off"]Target Content[/expand]

[expand title="Open" swaptitle="Close"]Target Content[/expand]

[expand title=""Read More..." swaptitle="...Read Less"]Target Content[/expand]

Trigpos Attribute

Use the trigpos attribute change the position of the trigger above or below the target. Default trigpos value is above.

• above (default) – the trigger text is placed above the collapsed content
• below – will move the trigger text below the target content

Example

[expand title="Open" trigpos="below"]Target Content[/expand]

ID Attribute

Setting the ID attribute will assign the expand element a HTML ID attribute with the provided value. Do not use duplicate ID values on elements that will exist on the same page. If no ID attribute is defined, the ID will be automatically assigned a unique, random value.

Example

[expand title="Pocket Calculator" id="kraftwerk"]Target Content[/expand]

URL Anchor

When an ID attribute is defined, the value can be used as an URL anchor to automatically expand and scroll to the target content on page load (demo).

Expanded Attribute

Setting the expanded attribute to true will set the default position of the element to open (expanded). The default position is closed (collapsed).

Example

[expand title="Vader" expanded="true"]Target Content[/expand]

Tag Attribute

The tag attribute replaces the default HTML tag that wraps the trigger text. The HTML tag is set globally in the plugin options, under Tag.

Example

[expand title="A Long Time Ago" tag="h2"]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.

Example

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

Example

[expand title="Imperial Starfleet" alt="Empire Strikes Back"]Target Content[/expand]

Notitle Attribute

The notitle attribute is used to prevent any hover-over text from being displayed.

Example

[expand title="Cloud City" notitle="true"]Target Content[/expand]

Placeholders

Placeholders allow HTML and shortcodes to be used within the title, swaptitle, startwrap, endwrap, excerpt and swapexcerpt attributes:

%(% = <
%)% = >
%{% = [
%}% = ]

See the Collapse-O-Matic Excerpt Shortcode Test for further details on how these are used.

Startwrap/Endwrap Attributes

The startwrap/endwrap tags are used to wrap a trigger in extra HTML.

Example

[expand title="Hoth System" startwrap="<strong>" endwrap="</strong>"]Target Content[/expand]

Elwraptag Attribute

The elwraptag attribute is used to wrap the entire collapse element.

Example

<ul>[expand title="Dagobah" elwraptag="li"]Target Content[/expand]</ul>

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.

Trigclass Attribute

The trigclass attribute allows the user to assign a custom class to the trigger element. This class will be added after the required collapseomatic class that is assigned by default. Multiple classes can be added separated with a space.

Examples

[expand title="A New Hope" trigclass="highlight"]Target Content[/expand]

[expand title="Jedi" trigclass="noarrow my_button"]Target Content[/expand]

Targclass Attribute

The targclass attribute allows the user to assign a custom class to the target element. This class will be added after the required collapseomatic_content class that is assigned by default.

Examples

[expand title="The Empire Strikes Back" targclass="highlight"]Target Content[/expand]

Targpos Attribute

The targpos attribute is used to change the position of the target content. Currently the only accepted value is ‘inline’. For best results, targpos should be used when:

1. an excerpt has been defined
2. the targtag has been assigned non-block element, such as span

Example

[expand title="Laugh It Up, Fuzzball" excerpt="Laugh It Up, Fuzzball: The Family Guy Trilogy." targtag="span" targpos="inline"]Target Content[/expand]

Rel Attribute

The rel attribute is used to group related expand elements by the assigned value. Expanding a member of one group will automatically collapse any expanded elements the belong to another group.

Examples

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

See Rel vs Togglegroup for a working demo.

Togglegroup Attribute

The togglegroup attribute and the related data-togglegroup HTML attribute are used to reference groups of expand elements without auto-collapsing other groups, as when using the group attribute.

Examples

[expand title="Star Wars" togglegroup="fiction"]Target Content[/expand]
[expand title="Star Trek" togglegroup="fiction"]Target Content[/expand]
[expand title="Battlestar Galactica" togglegroup="fiction"]Target Content[/expand]
[expand title="Space Race" togglegroup="history"]Target Content[/expand]
[expand title="Ansari X Prize" togglegroup="history"]Target Content[/expand]

See Rel vs Togglegroup for a working demo.

Highlander Grouping

If -highlander is added to all elements of a defined group (see Rel and Togglegroup), expanding one element will force all other elements in the same group to collapse: Highlander: There can be only one.

Examples

The following is an example of rel highlander grouping:

[expand title="Monkeys" rel="animal-highlander"]Target Content[/expand]
[expand title="Donkeys" rel="animal-highlander"]Target Content[/expand]

Highlander grouping can also be used with the togglegroups:

[expand title="Monkeys" togglegroup="animal-highlander"]Target Content[/expand]
[expand title="Donkeys" togglegroup="animal-highlander"]Target Content[/expand]

See Rel vs Togglegroup for a working demo.

Findme Attribute

Scroll the page to the trigger, target, or fixed value when expanded. Accepted values are:

• auto (same as target)
• target
• trigger
• a numeric value

Examples

[expand title="Stars" rel="star-highlander" findme="7070"]Target Content[/expand]
[expand title="Constellations" rel="star-highlander" findme="auto"]Target Content[/expand]

Roll-Your-Own Example

Use data-findme to define the findme value when using the roll-your-own method to create the collapse elements.

<div class="collapseomatic find-me" id="my_example" title="trigger text" data-findme="target">trigger text</div>
<div id="target-my_example" class="collapseomatic_content">Target Content</div>

Internal Collapse Trigger

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 an 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 be: ”bot-r2d2”.

Example

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

Scrollonclose Attribute

While findme is triggered when the element is expanded, scrollonclose triggers when the element is collapsed. The scrollonclose attribute may be assigned an exact offset-scroll value to scroll the page after the element collapses.

Examples

[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]
[expand title="Close-n-Scroll" scrollonclose="7000"]Closing this will auto scroll the element to 7000 pixels from the top.[/expand]

Excerpt Attribute

The excerpt attribute is used to display a teaser, or short nibble of text that hints at the content of the collapsed target text.

Examples

[expand title="Laugh It Up, Fuzzball" excerpt="Laugh It Up, Fuzzball: The Family Guy Trilogy"]Target Content[/expand]

Excerptpos Attribute

The excerptpos attribute is used to position the excerpt in one of three locations:

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

Examples

[expand title="Harvest Moon" excerpt="The Family Guy - Blue Harvest" excerptpos="above-trigger"]Target Content[/expand]

Excerptclass Attribute

The excerptclass attribute adds the defined class to the HTML element that wraps the excerpt text. This class will be added in addition to the default collapseomatic_excerpt class.

Examples

[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 HTML tag that wraps the excerpt text. Default excerpt HTML tag is DIV.

Examples

[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 out or replace the excerpt when the content is in the expanded state.

Example

[expand title="Millennium Falcon" excerpt="Owner: Hans Solo" swapexcerpt="Previous Owner: Lando Calrissian"]Target Content[/expand]

Animation_Effect Attribute

The animation_effect attribute is used to control the collapse/expand animation effect.
Valid values for this attribute are:

• slideToggle
• slideFade
• fadeOnly

Example

[expand title="trigger text" animation_effect="slideFade"]content[/expand]

Roll-Your-Own

The data-animation_effect attribute is used when rolling your own expand elements:

<div class="collapseomatic" id="some_id" title="trigger text" data-animation_effect="slideFade">content</div>

Duration Attribute

The duration attribute is used to control the speed of the collapse/expand animation in milliseconds.

Example

[expand title="trigger text" duration="2000"]content[/expand]

Roll-Your-Own

The data-duration attribute is used when rolling your own expand elements:

<div class="collapseomatic" id="some_id" title="trigger text" data-duraton="2000">content</div>