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

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

This is an example of Special Characters such as umlauts and accents in a Collapse-O-Matic Shortcode:

Roll-your-own:

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 another h2 heading

This is an expand element element from Collapse Commander:

[expand cid="1398"/]

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?

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]

now we are going to add the trigpos attribute:

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

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