Collapse-O-Matic – The Roll Your Own Method

Using the expand shortcode we can create a simple collapse-o-matic accordion element like so:

[expand title="Trigger Text"]Target Content[/expand]

Trigger Text
Target Content

Now, if we wanted to do the same thing but using the roll-your-own method we would have to create the elements manually:

<div class="collapseomatic " id="my_id" title="Trigger Text">Trigger Text</div>
<div id="target-my_id" class="collapseomatic_content ">Target Content</div>

Trigger Text
Target Content

Now, we have the freedom to put whatever we want before, in and after the Trigger element. For example a link between the target and trigger:

<div class="collapseomatic" id="my_new_id" title="Trigger Text">Trigger Text</div><a href="http://plugins.twinpictures.de/premium-plugins/collapse-pro-matic/">Special Link</a>
<div id="target-my_new_id" class="collapseomatic_content ">Target Content</div>

Trigger Text

Special Link

Target Content

Now if we apply a bit of CSS magic, we can have the trigger and link display inline:

Magic CSS

Place the following css in the collapse-o-matic (or collapse-pro-matic) plugin options page, under Custom Style:

.magic_beans {
display: inline;
float: left;
margin-right: 1.2em;
}

.clear {
clear: both;
}

Roll-Your-Own Method w/ Magic CSS

<div class="collapseomatic magic_beans" id="my_unique_id" title="Trigger Text">Trigger Text</div><a href="http://plugins.twinpictures.de/premium-plugins/collapse-pro-matic/" class="magic_beans">Collapse-Pro-Matic</a>
<div id="target-my_unique_id" class="collapseomatic_content clear">Target Content</div>

The Final Result

Trigger Text

Collapse-Pro-Matic

Target Content

Roll-Your-Own Method w/ Friggin’ Images!

<img src="http://spacedonkey.de/wp-content/uploads/2016/01/2001_Space_Odysey-300x145.gif" class="collapseomatic noarrow" id="some_id" title="Hover over Trigger Text">
<div class="collapseomatic_content" id="target-some_id" >Target Content</div>

Required components:

  • Trigger:
    • class="collapseomatic noarrow"
    • id="some_id"
  • Target:
    • class="collapseomatic_content"
    • id="target-some_id"

Demo:

Target Content

Highlander Grouping

Highlander grouping is accomplished by adding rel=”group_name-highlander” like so:

<div class="collapseomatic" id="monkey" rel="animal-highlander" title="Monkeys">Monkeys</div>
<div id="target-monkey" class="collapseomatic_content">The monkey says Eek! Eek!</div>
<div class="collapseomatic" id="donkey" rel="animal-highlander" title="Donkeys">Donkeys</div>
<div id="target-donkey" class="collapseomatic_content">The Donkey says Hee Haw</div>

Demo

Monkeys
The monkey says Eek! Eek!
Donkeys
The Donkey says Hee Haw

3 Replies to “Collapse-O-Matic – The Roll Your Own Method”

Leave a Reply

Your email address will not be published. Required fields are marked *