This is the top expand element
[bgmp-map]
Collapse-O-Matic Bottom Test
This is the bottom expand element
BGMP Test
Collapse-O-Matic Top Test
Print-O-Matic Placeholder Test
This is how one uses the %ID% placeholder for targeting the post_id
[print-me target="#post-%ID%"/]
4DD Mephisto VR
Strange hasClass Issue
Trigger Text
Target Content
Trigger Text
Target Content
Trigger Text
Target Content
Trigger Text
Target Content
Trigger Text
Target Content
Trigger Text
Target Content
On
Open
Target 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!
Column-Matic Responsive Test
Column-Matic Shortcode
[[column class="column_left" float=""]Yada yada, spiffy logo image with a funky monkey and a wiffle-ball bat.[/column]]
[[column class="column_right" float=""]Yippy Skippy another logo image with a ding-ding-dong touching tra-la-la.[/column]]
[[end_columns]]
CSS
For normal screens:
.column_left {
margin-left:0;
float:left;
width: 40%;
}
.column_right {
float: left;
margin-left: 10px;
border-left: 1px dotted red;
padding-left: 10px;
width: 40%;
}
For Screens smaller than 450px wide:
@media (max-width: 450px) {
.column_left, .column_right{
width: 95%;
margin: 0 auto;
padding: 3px;
clear: both;
border: none;
}
}