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 the target element whatever we want: before, in or after the Trigger element. For example, here a link has been placed between the target and trigger:

<div class="collapseomatic" id="my_new_id"  title="Trigger Text">Trigger Text</div>
<a href="">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="" 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


Target Content

Roll-Your-Own Method w/ Images

<img src="" 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”


Target Content

Highlander Grouping

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

<div class="collapseomatic" id="monkey" data-group="animal-highlander" title="Monkeys">Monkeys</div>

<div id="target-monkey" class="collapseomatic_content">The monkey says Eek! Eek!</div>

<div class="collapseomatic" id="donkey" data-group="animal-highlander" title="Donkeys">Donkeys</div>

<div id="target-donkey" class="collapseomatic_content">The Donkey says Hee Haw</div>


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

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

  1. Support for our free plugin is offered at:

    If you require personal support, Collapse-Pro-Matic comes with a very high level of support, including getting the issue resolved directly on your page, with a step-by-step explanation of what we did.

    If you open a thread at WordPress, please include a link to your site, so we can take a closer look at the issue.

Comments are closed.