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]

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>

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="http://plugins.twinpictures.de/premium-plugins/collapse-pro-matic/">Special Link</a>
<div id="target-my_new_id" class="collapseomatic_content ">Target Content</div>

Special Link

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

Collapse-Pro-Matic

Roll-Your-Own Method w/ Images

<img src="https://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:

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>

Demo