Print-O-Matic Test
Episode IV, A NEW HOPE
It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet. Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy…
Collapse-O-Matic: Changing Parent Element
Trigger Open
Internal Close Trigger
Trigger Open
Internal Close Trigger
Element Wrap Test
The new elwraptag and elwrapclass attributes:
[expand title="trigger test" elwraptag="div" elwrapclass="classy"]target content[/expand]
Skinny Collapse Wrap
Ordered Lists
- Lorem ipsum dolor sit amet dolor sit ipsum, dolor ipsum sit amet dolor sit ipsum?
- Lorem ipsum dolor sit amet dolor sit ipsum, dolor ipsum sit amet dolor sit ipsum?
- Lorem ipsum dolor sit amet dolor sit ipsum, dolor ipsum sit amet dolor sit ipsum?
- Lorem ipsum dolor sit amet dolor sit ipsum, dolor ipsum sit amet dolor sit ipsum?
- Lorem ipsum dolor sit amet dolor sit ipsum, dolor ipsum sit amet dolor sit ipsum?
Non-Text Expand Test
Using notitle=true and tag=div
Using no attributes, preceding text, div wrapped
Using tag=li, ul wrapped
entente test
Orginal
How do I purchase an item as a gift?
When you decide what item you want to purchase, right click the item and choose “touch” from the options. A blue menu will appear, choose “Gift” and follow the instructions.
Fixed
How do I purchase an item as a gift?
When you decide what item you want to purchase, right click the item and choose “touch” from the options. A blue menu will appear, choose “Gift” and follow the instructions.
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>
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 | ||
|
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 Snap Close Test
[expand title="The Big Lebowski" trigclass="snap-shut" rel="dude-highlander" tag="h2"]Target Content[/expand]
[expand title="Walter" trigclass="snap-shut" rel="dude-highlander" tag="h2"]Target Content[/expand]
[expand title="Donny" rel="dude-highlander" tag="h2"]Target Content[/expand]
The Big Lebowski
Walter
Donny
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 less…