Arrows

Two sets of up/down arrow images are included with the plugin. Also included is a Photoshop .psd file that can be used as a template to create custom arrows. To make update-proof modifications to the arrows, place the new arrow images in the same folder as the child-theme style.css file. Then, add the following to the style.css file or the theme quick-css section:

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

For step-by-step instructions on how to integrate custom arrows, see the Collapse-O/Pro-Matic CSS Tricks – Arrows and Collapse-O/Pro-Matic CSS Tricks II – Font Awesome Arrows articles.

Visited

Expand elements that have been clicked and expanded at least once will have the colomat-visited class automatically assigned. To modify the appearance of visited expand elements, the .colomat-visited class need only be defined.

CSS:

.colomat-visited {
    color: #0073aa;
}

Nested Expand Elements

Expand elements can be nested up to 30 levels deep using the shortcodes: [expandsub1] – [expandsub30]

Example

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

Example

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

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

Example

[expand title="Fiction" rel="fiction"]
  [expandsub2 title="Star Wars" rel="submenu-highlander"]
    [expandsub3 title="Rebels" rel="subsubmenu-highlander"]
      [expandsub4 title="Skywalker" rel="sub3menu-highlander"]
        [expandsub5 title="Luke" rel="sub4menu-highlander"]
          [expandsub6 title="Droids" rel="sub5menu-highlander"]
            [expandsub7 title="R2D2" rel="sub6menu-highlander"]Beep Boo Bop Beep[/expandsub7]
            [expandsub7 title="C3PO" rel="sub6menu-highlander"]Master Luke![/expandsub7]
          [/expandsub6]
          [expandsub6 title="Light Saber" rel="sub5menu-highlander"]WaaaaWaaaooe Wap-Waaaaa[/expandsub6]
        [/expandsub5]
        [expandsub5 title="Leah" rel="sub4menu-highlander"]I am going Solo![/expandsub5]
      [/expandsub4]
      [expandsub4 title="Knobi" rel="sub3menu-highlander"]Obi Wan Knobi[/expandsub4]
    [/expandsub3]
    [expandsub3 title="Empire" rel="subsubmenu-highlander"]The Dark Side of the Force[/expandsub3]
  [/expandsub2]
  [expandsub2 title="Star Trek" rel="submenu-highlander"]Target Content[/expandsub2]
  [expandsub2 title="Battlestar Galactica" rel="submenu-highlander"]Target Content[/expandsub2]
[/expand]

Expand/Collapse All Triggers

Create unique external triggers that will Expand or collapse all elements on the page. The triggers can be made from any HTML element as long as it has been assigned a class of either <em>expandall</em> or <em>collapseall</em>.

Examples

<span class="expandall">Expand All</span>
<span class="collapseall">Collapse All</span>

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.

Examples

<span class="expandall" rel="fiction">Expand All</span>
<span class="collapseall" rel="fiction">Collapse All</span>

Setall Toggle

Expand and collapse all elements, or only those belonging to the same group with a single toggle trigger. The toggle is created using the expand shortcode with a trigclass of setall. Assigning a swaptitle is also recommended to clarify the toggle.

Examples

[expand title="Expand All" swaptitle="Collapse All" trigclass="setall"/]

To expand/collapse only members of a specific group, a group name must be provided using the rel attribute:

[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" rel="my_group"/]
[expand title="expand 1" rel="my_group"]this is the first expand item[/expand]
[expand title="expand 2" rel="my_group"]this is the second expand item[/expand]

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

Examples

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

Scroll On Close

Often an internal collapse trigger is used 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.

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

The Roll Your Own Method

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 has to be wrapped in an element with the class of collapseomatic-content
3. The target element also has ID requirements. It must be the same as the trigger pre-appended with target-. For example: if the trigger has an ID of kraftwerk then the matching target ID must look like: id="target-kraftwerk"

More information, complete with working demonstrations, can be found in the post: Collapse-O-Matic – The Roll Your Own Method

Examples

A roll-your-own example that places the trigger (with a swaptitle) below the target:

<div id="target-monkey1" class="collapseomatic_content">Target Content</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:

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

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

Multiple Triggers

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

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

Example

<div id="test" class="collapseomatic">Trigger 1</div>
<div id="target-test" class="collapseomatic_content">Target Content</div>
<div id="extra1-test" class="collapseomatic">Trigger 2</div>
<div id="extra2-test" class="collapseomatic">Trigger 3</div>

Special Classes

There are a number of special classes that can be assigned in shortcodes using either the trigclass or targclass attributes. These classes can also be assigned to trigges, targets and external HTML elements using the roll-your-own method. An overview of these special class are listed in the table below.