Category: collapse-pro-matic

May 2014

July 2014

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]

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;
}

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

using a stylized div

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]

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:

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:

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>

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

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.

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"]

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

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]