Collase-O-Matic Roll-Your-Own Inline Target Above

This is some text that goes on a bit and then there will be a simply read-more link after this run-on sentence finally ends. It also features a bit more text that is originally hidden, but then pops up when the read-more link is clicked. read more

This was done using the following code structure:

<span id="target-monkey1" class="collapseomatic_content_inline colomat-inline span_fix">It also features a ...</span> <span id="monkey1" class="collapseomatic" title="read more">read more</span><span id="swap-monkey1" style="display: none;">read less</span>

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:
[expand_trig cid=”2119″ /] [expand_trig cid=”2120″ /] [expand_trig cid=”2121″ /]
[expand_targ cid=”2119″ /] [expand_targ cid=”2120″ /] [expand_targ cid=”2121″ /]