Collapse-O-Matic Image And Text Trigger

This is a test to see if both an image and text can be used as a trigger.

Shortcode:

[expand title="<img src='https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg'><br/>Trigger Text" trigclass="noarrow"]Hidden Target Content[/expand]


Trigger Text
Hidden Target Content

Without Text

[expand title="<img src='https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg'>" trigclass="noarrow"]Hidden Target Content[/expand]

Hidden Target Content

Roll-Your-Own Method

With Text

<div class="collapseomatic noarrow" id="some_id_one" title="Hover over Trigger Text"><img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg"/></br>Trigger Text</div>
<div id="target-some_id_one" class="collapseomatic_content ">Hidden Target Content</div>

Trigger Text
Hidden Target Content

Without Text

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" class="collapseomatic noarrow" id="some_id" title="Hover over Trigger Text">
<div id="target-some_id" class="collapseomatic_content ">Hidden Target Content</div>

Hidden Target Content

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="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="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:

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

H2 Headline Text

target content

Collapse-Pro-Matic Expand UP Test

Above and Beyond

In this example we simply add the trigpos=”below” to place the trigger below the target area:

[expand id="aboveandbeyond" title="Above & Beyond" trigpos="below"]This is an example of an expand element that has the trigger below the target.[/expand]

This is an example of an expand element that has the trigger below the target.
Above & Beyond

Up Up & Away

In this example we will use the roll-your-own method to not only place the trigger below the target, but also:

  1. position the target absolutely so that the trigger does not move down
  2. attempt to make the content animate UP from the trigger

HTML
<div id="absolute">
<div id="target-upaway" class="collapseomatic_content">This is an example of an expand element that will "Slide Up" on top of the trigger when expanded and "Slide Down" into the trigger when collapsed.</div>
<div id="upaway" class="collapseomatic">Up Up & Away</div>
</div>

Notice that we have wrapped both the target and trigger elements in a div that has been assigned the id of “absolute”. We give this wrapping div absolute positioning and anchor it so many pixels off the bottom of the page using the following CSS:

CSS
#absolute {
position: absolute;
bottom: 60px;
padding-bottom:2%;
z-index: 100;
}

This is an example of an expand element that will “Slide Up” on top of the trigger when expanded and “Slide Down” into the trigger when collapsed.
Up Up & Away

Collapse-O-Matic Button Test

There are a couple of ways a button can be used as a collapse-o-matic trigger:

using a stylized div

Push me
this is the hidden content

shortcode:

[expand title="Push me" trigclass="noarrow my_button" targclass="my_content" tag="div"]this is the hidden content[/expand]

css:

.my_button {
background: #4B55E3;
color:  white;
padding:  5px;
width: 130px;
text-align: center;
}

.my_button.colomat-hover{
 background: #999;
text-decoration: none;
}

.my_content{
margin-left: 0;
}

Using a html button:

shortcode:

[expand title="Push me" trigclass="noarrow my_button" targclass="my_content" tag="button"]this is the hidden content[/expand]
this is the hidden content

Collapse-O-Matic Multi Triggers & Targets

Multiple Triggers

Add the format extra[n]-id to add extra external triggers for a single target:
<div id="test" class="collapseomatic">Trigger 1</div>
<div id="target-test" class="collapseomatic_content">You might think you can catch a monkey, but you can't. Monkeys are FAST!</div>
<div id="extra1-test" class="collapseomatic">Trigger 2</div>
<div id="extra2-test" class="collapseomatic">Trigger 3</div>

which should produce a little something like:

Trigger 1
You might think you can catch a monkey, but you can’t. Monkeys are FAST!
Trigger 2
Trigger 3

Multiple Targets

Multiple targets are available only in the Collapse-Pro-Matic plugin. To add extra targets, assign the ID in the format of target[n]-id as follows:
<div id="target1-monkey" class="collapseomatic_content">content</div>
<div id="monkey" class="collapseomatic">Trigger</div>
<div id="target2-monkey" class="collapseomatic_content">content</div>

which should produce a little something like:

You might think you can catch a monkey, but you can’t. Monkeys are FAST!
Trigger
You might still think you can catch a monkey, but you really can’t. Monkeys are still FAST!

Collapse-O-Matic > Line of Trigger Images

Step One

Create each expand element using the title element as the image tag. Assign it a trigclass=”noarrow” and give it an alt attribute that makes sense:

[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one"]This is the content of the first image[/expand]

Step Two

Wrap each expand element in a div with a unique class. We used ‘birdwire‘ because it makes all the images nice and need in a row like… birds on a wire! Hmmm, maybe we should have used ducksrow. Anyway, each element will now look like so:

<div class="birdwire">[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one"]This is the content of the first image[/expand]</div>

Final Step

Add the following to your theme’s style.css:


.birdwire {
display: inline;
float: left;
margin-right: 1.625em;
width: 160px;
}

And Blam-O! The images line up and float left like so:

This is the content of the first image
This is the content of the second image
This is the content of the third image

After you will want to add <div style="clear: both"> </div> to force new content to show up below, fresh in it’s own line.

Highlander Grouping

Now, say you want to add highlander grouping. The code now would look like:
<div class="birdwire">[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one" rel="ninja-highlander"]This is the content of the first image[/expand]</div>

This is the content of the first image
This is the content of the second image
This is the content of the third image

Grid of Images

In the above examples, the targets are displayed directly below the related triggers. The following example shows how to place a line of image triggers that will display the targets below all images using the roll-your-own method:

The Triggers

<div class="birdwire"> <img id="nj1" src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-150x150.jpg" class="collapseomatic noarrow" rel="ninjtee-highlander"/> </div> <div class="birdwire"> <img id="nj2" src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-150x150.jpg" class="collapseomatic noarrow" rel="ninjtee-highlander"/> </div>

The Targets

<div style="clear: both;"> </div>
<div id="target-nj1" class="collapseomatic_content">Target content for first trigger</div>
<div id="target-nj2" class="collapseomatic_content">Target content for second trigger</div>
Target content for first trigger
Target content for second trigger

Collapse-O-Matic > Multiple Triggers

First create a standard collapse element and assign it an id:
[expand title="This is the Master Trigger" id="multitrig"]

This is the Master Trigger
This is some text that when you click on the trigger you are able to read with your eyes. Well, your eyes are able to see the text, but I guess it’s actually your brain that reads the words and makes sense of them. But jokes on you! There is no sense to be made from these words because they are just pure jibber-jabber.

Now if an additional trigger link is needed, just insert a span with “collapseomatic noarrow” class and and id that is ‘bot-[the_target_id]’ like so:
<span class="collapseomatic noarrow" id="bot-multitrig">This is a second trigger</span>
This is a second trigger

Collapse-Pro-Matic Class Triggers

As of version 1.3.2 of Collapse-Pro-Matic an external trigger can also be assigned to any element using only class names. Check out collapse-pro-matic advanced external triggers for more information and a working demo.

Collapse-O-Matic Centered Titlte

This title is Left
This is left stuff that makes the wonky wank wonder spank

To center the text first add the following to the theme’s style.css file:
.centron {
text-align: center;
}

Next, add the trigclass=”centron” attributes to the expand shortcode:
[expand title="This title is Centered" trigclass="centron"]

This title is Centered
This is the text that makes the baw-bitty-baw-ba-baw-ba-baw-baw ditty bitty baw ditty dong de up chuck the monkey

Note: if the default tag is not already set to div, the tag=”div” attribute will need to be added as well.

Collapse-O-Matic – Table Test

Various ways the Collapse-O-Matic plugin may be used in conjunction with tables.

Expanding The Entire Table

This is straight forward. We simply wrap a table in an expand element:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td>Three</td><td>Four</td></tr>
   </tbody>
</table>
View Table
One Two
Three Four

Expanding A Row

This is a bit more tricky. Notice, what happens when we wrap to wrap a table row in a div:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <div style="border: 1px dotted blue">
         <tr><td>Three</td><td>Four</td></tr>
      </div>
   </tbody>
</table>
One Two
Three Four

Se how the div is rendered outside of the table? To place the div INSIDE of the table, the div needs to be wrapped in td tags like so:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr>
         <td colspan="2">
            <div style="border: 1px dotted blue">
               <table>
                  <tbody>
                     <tr><td>Three</td><td>Four</td></tr>
                  </tbody>
                </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>
One Two
Three Four

Well, now the row we want to use as the target content is inside the table, but as you can see, the inner table is not matching the column layout. So what if we use the table’s TR as the collapse element:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td colspan="2" class="collapseomatic" id="singlerow">Trigger</td></tr>
      <tr class="collapseomatic_content" id="target-singlerow">
          <td>Three</td><td>Four</td>
      </tr>
   </tbody>
</table>
One Two
Trigger
Three Four

Perfect! This works well for expanding and collapsing a SINGLE Table Row.

Expanding Multiple Rows

Collapse-O-Matic only allows a trigger to control a single target area. One of the many features of the pro version, Collapse-Pro-Matic is the added ability to have a single trigger control multiple targets. To add extra targets to a trigger, the ID must be in the format of target[n]-id as follows:

<div id="monkey" class="collapseomatic">Trigger</div>
<div id="target1-monkey" class="collapseomatic_content">content</div>
<div id="target2-monkey" class="collapseomatic_content">content</div>

So in our example of the table, we would hook up multiple rows like so:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td colspan="2" class="collapseomatic" id="singlerow">Trigger</td></tr>
      <tr class="collapseomatic_content" id="target1-singlerow">
          <td>Three</td><td>Four</td>
      </tr>
      <tr class="collapseomatic_content" id="target2-singlerow">
          <td>Five</td><td>Six</td>
      </tr>
      <tr class="collapseomatic_content" id="target3-singlerow">
          <td>Seven</td><td>Eight</td>
      </tr>
   </tbody>
</table>
One Two
Trigger
Three Four
Five Six
Seven Eight

Collapse-O-Matic Top & Bottom Trigger Test

This is how to place a trigger at the top and bottom of a expand element:

[expand title="Read more..." swaptitle="Read less..." id="swine"]...content...
<span class="collapseomatic colomat-close" id="bot-swine">Read less...</span>
[/expand]
Read more...
Swine frankfurter non in shoulder. Tri-tip boudin prosciutto pork ball tip elit flank. Incididunt id ex, fugiat cillum turducken andouille sirloin est.
Read less…