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='http://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='http://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="http://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="http://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 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

H2 Headline Text

target content

Collapse-Pro-Matic Setall Expand/Collapse Toggle

This is an example of the expand all/collapse all trigger using the setall trigclass:
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall"/] [expand title="expand 1"]this is the first expand item[/expand] [expand title="expand 2"]this is the second expand item[/expand]

Expand All
expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the third expand item
expand 4
this is the forth expand item

Now, what if all items where expanded one by one… then we would want the setall trigger to know this and auto switch to the collapse all function. To do this we would need to associate them to the same group using the rel grouping attribute:

[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" rel="my_group"/] [expand title="expand 1" rel="my_group"]this is the first expand item[/expand] [expand title="expand 2" rel="my_group"]this is the second expand item[/expand]

Expand All
expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the third expand item
expand 4
this is the forth expand item

Testing Continues Here and also on this post

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="http://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="http://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.