Advanced Use Cases

Collapse-Pro-Matic | Documentation

Advanced Use Cases

Although the [expand] shortcode is quite powerful on its own, there are some use cases that require more flexibility. Collapse-Pro-Matic offers a few tricks that go beyond the shortcode. These are described below.

Topics

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.

Pro Only

Multiple Targets

Multiple targets controlled by the same trigger can be setup when using the roll-your-own method. The extra targets must contain the following:

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

Example

<div id="target1-monkey" class="collapseomatic_content">content 1</div>
<div id="monkey" class="collapseomatic">Trigger</div>
<div id="target2-monkey" class="collapseomatic_content">content 2</div>

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;
}

Pro Only

Event Callbacks

A javascript function name or script can be executed before or after a collapse or expand function is triggered. The following events will trigger custom callbacks set up in the plugin options page:

Expand

Pre Expand
Expand
Expand Al

Collapse

Pre Collapse
Collapse
Collapse All

Expand & Collapse

Pre Expand/Collapse
Expand/Collapse

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:

The expand tag must have a defined ID
The second internal trigger element must be assigned a class of collapseomatic
To have the arrow point up, rather than down, add the class of colomat-close to the second trigger element
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:

The trigger element has to be wrapped in an element with the class of collapseomatic and a unique id
The target element has to be wrapped in an element with the class of collapseomatic-content
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.

Class Name	Used By	Purpose
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.
must-be-one	targclass	add this class to the trigger of all elements in a highlander-group and the open element will be forced to stay open. demo
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.
expandanchor	link	Assign this class to an anchor link to auto-expand a collapse element on the same page. demo
snap-shut	trigclass	Assign this class to a trigger to immediately close it rather than smoothly animate the collapse. Useful when used with highlander grouping. demo
expandall	any HTML element	Expand all elements with one external trigger. The trigger may be any type of HTML tag.
collapseall	any HTML element	Collapse all elements with one external trigger. The trigger may be any type of HTML tag.
setall	trigclass	Expand and collapse all elements with a single external toggle.
must-be-one	trigclass	Forces one element to stay open in a highlander grouping. demo