Collapse-O-Matic – Inline Roll-Your-Own Triggers

This is a follow-up post to Collapse-O-Matic > Line of Trigger Images. This time we want to have the triggers in-line but the content to be displayed below the trigger line. To do this we first must use the roll-your-own method.

Triggers:

<span class="collapseomatic" id="item_one" data-group="item-highlander">Trigger One</span> <span class="collapseomatic" id="item_two" data-group="item-highlander">Trigger Two</span> <span class="collapseomatic" id="item_three" data-group="item-highlander">Trigger Three</span>

Targets:

<div id="target-item_one" class="collapseomatic_content ">Target One</div>
<div id="target-item_two" class="collapseomatic_content ">Target Two</div>
<div id="target-item_three" class="collapseomatic_content ">Target Three</div>

The Results:

Trigger One Trigger Two Trigger Three
Target One
Target Two
Target Three

Collaspse-Commander

The same thing with collapse commander would look like this:

[expand_trig cid="2119" /] [expand_trig cid="2120" /] [expand_trig cid="2121" /]
[expand_targ cid="2119" /] [expand_targ cid="2120" /] [expand_targ cid="2121" /]

Results:
Item One Item Two Item Three

Target One

Target Two

Target Three

Collapse-O-Matic Table of Content Test

This is a test that features a table of content from the Table of Content plugin as well as a collapse-o-matic expand element AND a collapse-commander element.
[toc wrapping=“right“]

This is an H1 heading

This is a heading

This is the content area and it has a collapse element in it:

[expand title="This is the expand element"]...and this is the target content[/expand]

This is the expand element
…and this is the target content

This is another h2 heading

This is an expand element element from Collapse Commander:

[expand cid="1398"/]

Test Expand Element
This is the content of the expand element early_oculous

This is a third h2 element

  • list item
  • list item
  • list item
  • list item

This is another H1 heading

Fourth heading element

Fifth heading, how do you like it?

Collapse-O-Matic TrigPos Test

This is a quick test of the trigpos attribute.

Normally, an expand element shortcode looks and works like this:

[expand title="trigger"]hidden content[/expand]

trigger
hidden content

now we are going to add the trigpos attribute:

[expand title="trigger" trigpos="below"]hidden content[/expand]

hidden content
trigger

And this works exactly the same way for collapse-pro-matic, of course.

Collapse-O-Matic FAQ Trigger by Mouse Hover

Q: Can this work on mouseover or hover?

A: This is a question we get quite often. The plugin does not work with hover. We have created custom versions for clients in the past that does this, however you really need to think through how you will deal with touch devices that do not have a ‚hover‘ state.

Also, when you hover over and item, how will your user close it? On mouse HoverOut is the easy answer, but then the user can never select or click on anything in the target area.

In short, it can be done but it’s a complex interaction that needs to be well planned out.

Here is an example of a plugin we custom built for a client.