collapse-o-matic collapse-pro-matic

collapse-o-matic with inline link

This is an example of a collapse element with an inline link.

[expand title="this is a test with a <a href='https://plugins.twinpictures.de'>link</a>"]here is some hidden content[/expand]

the key is to use double quotes to wrap the title attribute and single quotes for the html inside the double quotes.

this is a test with a link
here is some hidden content
collapse-commander collapse-o-matic

Collapse-O-Matic & Collapse Commander Templating Test

This is a test of the Collapse Commander templating system in use with the free Collapse-O-Matic plugin:

This is a test of the templating system.
Template Test

The above collapse element should expand above the trigger.

collapse-o-matic collapse-pro-matic

Collapse-O-Matic Numbers as ID Issue

This is a quick post to test the issue when using numbers as IDs as brought up in this thread:

To recreate this we will use two collapse elements with the ID’s of 1,2,3, 11, 12 and 13.

Trigger One
Content for ID one
Trigger Two
Content for ID two
Trigger Three
Content for ID three

Trigger Eleven
Content for ID eleven
Trigger Twelve
Content for ID twelve
Trigger Thirteen
Content for ID thirteen

The issue is the toggle selectors where using the following jQuery selector:


As of collapse-o-matic version 1.7.9 the selector is a more exact:

collapse-o-matic collapse-pro-matic

Collapse-O-Matic Nested SwapTitles

[expand title="Fiction" rel="fiction" swaptitle="Is like non-non-fiction"]
[expandsub1 title="Star Wars" rel="submenu-highlander" swaptitle="Hyperspeed" expanded="true"]Target Content[/expandsub1]
[expandsub1 title="Star Trek" rel="submenu-highlander" swaptitle="Warpspeed"]Target Content[/expandsub1]
Star Wars
Target Content
Star Trek
Target Content
collapse-o-matic collapse-pro-matic

Collapse-O-Matic Grey Bar Style

Here is an example of how to pimp the collapse-o-matic expand to use a grey bar style using CSS.
Be sure you are using the div ad your default tag in the plugin settings.

The CSS:

.greybar {
   border: 1px dotted #aaaaaa;
   padding: 7px;
   background-position: 98% center;
   background-color: #cccccc;

The Code:

[expand trigclass="arrowright greybar" title="Monkeys Are Fast"]...[/expand]
Monkeys Are Fast

To give the target content a border, use the targclass attribute:

The CSS:

.blueborder {
   border: 1px dotted blue;
   border-top: none;
   margin-left: 0;
  padding: 5px;

The Code:

[expand trigclass="arrowright greybar" targclass="blueborder" title="Monkeys Are Fast"]...[/expand]
Monkeys Are Fast
To add a graphic to the background, simply create a new class and add the appropriate css:

.de_flag {
    background-image: url(https://lipis.github.io/flag-icon-css/flags/4x3/de.svg);
    background-size: 64px 16px;
    background-repeat: no-repeat;
    background-position: -10px center;
    padding: 7px 7px 7px 42px;

then add the new class to the trigclass attribute:

[expand trigclass="arrowright greybar de_flag" title="Deutschland"]...[/expand]
collapse-o-matic collapse-pro-matic

Collapse-O-Matic Inline Trigger with Block Target


This is an example of some text that has a trigger placed inline, meaning that the trigger does not break the flow of the text. However, when this triggerhidden content is clicked and the target is expanded, the target would break the paragraph as a display: block element. Naturally, when the element is collapsed, the inline flow returns.

...However, when [expand tag="span" title="this trigger" targtag="span"]hidden content[/expand] is clicked...

The Roll-Your-Own Method

This is an example of some text that has a trigger placed inline, using the roll-your-own method. However, when this trigger

hidden content

is clicked and the target is expanded, the target would break the paragraph as a display: block element. Naturally, when the element is collapsed, the inline flow returns.

...However, when <span title="this trigger" class="collapseomatic" id="testme2">this trigger</span><div class="collapseomatic_content" id="target-testme2">hidden content</div>
is clicked...
collapse-o-matic t(-) countdown control t(-) countdown events

Limited Time Offer Demo

This is an example of how a limited time offer would work in conjunction with content in a collapse-o-matic expand element.

This demo uses T(-) Countdown Control with a cookie that tracks when the offer expires for each unique visitor. Once the countdown reaches zero, T(-) Countdown Events will remove any special offer items.

For this demo, we’ll set the special timer for just two minutes. The offer will then be removed for 24 hours, and then after the 24 hours are past, the offer will reset.

this is where the details of the special are presented
collapse-o-matic collapse-pro-matic

Collapse-O-Matic External Triggers for Nested Element

Here is a nested expand to test this issue.

[expand title="Level 1" id="q1" rel="top-highlander" trigclass="must-be-one" expanded="true"]
   [expandsub1 title="Nested Level a1" id="a1" rel="a-highlander"]answer a1[/expandsub1]
   [expandsub1 title="Nested Level a2" id="a2" rel="a-highlander"]answer a2[/expandsub1]
[expand title="Level 2" id="q2" rel="top-highlander" trigclass="must-be-one"]
   [expandsub1 title="Nested Level b1" id="b1" rel="b-highlander"]answer b1[/expandsub1]
   [expandsub1 title="Nested Level b2" id="b2" rel="b-highlander"]answer b2[/expandsub1]
Level 1
Nested Level a1
answer a1
Nested Level a2
answer a2
Level 2
Nested Level b1
answer b1
Nested Level b2
answer b2

Here are some external triggers:

<a class="expandanchor" href="#q1">Level 1</a>
<a class="expandanchor" href="#a1">Level 1a</a>
<a class="expandanchor" href="#a2">Level 1b</a>
<a class="expandanchor" href="#q2">Level 2</a>
<a class="expandanchor" href="#b1">Level 2a</a>
<a class="expandanchor" href="#b2">Level 2b</a>

Level 1
Level 1a
Level 1b
Level 2
Level 2a
Level 2b

collapse-o-matic collapse-pro-matic

Collapse Grid Test

here we go:

[[collapse_grid cat_id="4" count="5"/]]
[collapse_grid cat_id=“4″ count=“5″/]
collapse-o-matic collapse-pro-matic

Collapse-O-Matic, Graphene Theme & Any Mobile Switcher Test

First let’s test the mobile-only and mobile-exclude shortcodes to see if they are included with the plugin. No, they are not.

Now we install the Graphene Theme and test…
Oops, wrong Graphene Theme. It seems This Theme is all that is required for testing the shortcodes.

Mobile Only

[[mobile only]...[/mobile-only]]
[mobile only] this is some text that should only show up on mobile devices

Mobile Exclude

[[mobile exclude]...[/mobile-exclude]]
[mobile-exclude] this is some text that should only show up on non-mobile devices