Categories: archive-pro-matic, collapse-pro-matic
November 2016
January 2017

Posted on

Collapse-O-Matic Inline Trigger with Block Target

Shortcode

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><span class="collapseomatic_content" id="target-testme2">hidden content</span>
is clicked...
Posted on

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]
[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]
[/expand]
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

Posted on

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

Mobile Exclude

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

Collapse-O/Pro-Matic Slider Effect and Duration Attributes

Currently the slide effect and duration can be set globally under the plugin settings, but what if we want to set it individually per collapse element? We need the ability to add this via a shortcode attribute and as a data attribute for the roll-your-own method.

Shortcode Attributes

Default animation_effect is slideFade and duration is fast. As of version 1.7.3 these can be overridden using two new attributes: animation_effect and duration. Since using a shortcode will save the default effect and speed to a variable, we need to set up a separate test for the roll-your-own method

[expand title="Monkeys"]...[/expand]
[expand title="Donkeys" duration="slow"]...[/expand]
[expand title="Ninjas" animation_effect="slideToggle"]...[/expand]
Monkeys
A monkey is a primate of the Haplorrhini suborder and simian infraorder, either an Old World monkey or a New World monkey, but excluding apes and humans. There are about 260 known living species of monkey. Many are arboreal, although there are species that live primarily on the ground, such as baboons. Monkeys are generally considered to be intelligent. Unlike apes, monkeys usually have tails. Tailless monkeys may be called “apes”, incorrectly according to modern usage; thus the tailless Barbary macaque is called the “Barbary ape”.
Donkeys
The donkey or ass, Equus africanus asinus,[1][2] is a domesticated member of the Equidae or horse family. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years. There are more than 40 million donkeys in the world, mostly in underdeveloped countries, where they are used principally as draught or pack animals. Working donkeys are often associated with those living at or below subsistence levels. Small numbers of donkeys are kept for breeding or as pets in developed countries.
Ninjas
A ninja (忍者?) or shinobi (忍び?) was a covert agent or mercenary in feudal Japan who specialized in unorthodox warfare. The functions of the ninja included espionage, sabotage, infiltration, and assassination, and open combat in certain situations.[1] Their covert methods of waging war contrasted the ninja with the samurai, who observed strict rules about honor and combat.[2] The shinobi proper, a specially trained group of spies and mercenaries, appeared in the Sengoku or “warring states” period, in the 15th century,[3] but antecedents may have existed in the 14th century,[4] and possibly even in the 12th century (Heian or early Kamakura era).[5][6]
Posted on

Collapse-O/Pro-Matic Highlander Must Be One

As of Collapse-O-Matic version 1.7.2 and Collapse-Pro-Matic version 1.3.2 we have added the ability to force one element to stay open in a highlander grouping. Simply add the class must-be-one to all the triggers in a highlander group using the trigclass attribute like so:

Shortcode

[expand title="Monkeys" rel="animal-highlander" trigclass="must-be-one"]...[/expand]
[expand title="Donkeys" rel="animal-highlander" trigclass="must-be-one"]...[/expand]
[expand title="Ninjas" rel="animal-highlander" trigclass="must-be-one"]...[/expand]

Example

Monkeys
A monkey is a primate of the Haplorrhini suborder and simian infraorder, either an Old World monkey or a New World monkey, but excluding apes and humans. There are about 260 known living species of monkey. Many are arboreal, although there are species that live primarily on the ground, such as baboons. Monkeys are generally considered to be intelligent. Unlike apes, monkeys usually have tails. Tailless monkeys may be called “apes”, incorrectly according to modern usage; thus the tailless Barbary macaque is called the “Barbary ape”.
Donkeys
The donkey or ass, Equus africanus asinus,[1][2] is a domesticated member of the Equidae or horse family. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a working animal for at least 5000 years. There are more than 40 million donkeys in the world, mostly in underdeveloped countries, where they are used principally as draught or pack animals. Working donkeys are often associated with those living at or below subsistence levels. Small numbers of donkeys are kept for breeding or as pets in developed countries.
Ninjas
A ninja (忍者?) or shinobi (忍び?) was a covert agent or mercenary in feudal Japan who specialized in unorthodox warfare. The functions of the ninja included espionage, sabotage, infiltration, and assassination, and open combat in certain situations.[1] Their covert methods of waging war contrasted the ninja with the samurai, who observed strict rules about honor and combat.[2] The shinobi proper, a specially trained group of spies and mercenaries, appeared in the Sengoku or “warring states” period, in the 15th century,[3] but antecedents may have existed in the 14th century,[4] and possibly even in the 12th century (Heian or early Kamakura era).[5][6]
Posted on

Collapse-O-Matic CSS Tricks .colomat-close

When an expand element is expanded it has the .colomat-close class assigned. This class is removed when the expand element is collapsed. So, if you want to adjust how an active/expanded trigger is displayed, simply define your custom css as follows:

/*inactive/collapsed */
.collapseomatic {

}

/*active/expanded */
.collapseomatic.colomat-close {

}

Simple Demo

Using the trigclass attribute we can further assign the design of the triggers for only specific expand elements.

CSS

.collapseomatic.my_special_class {
    color: green;
}

.collapseomatic.my_special_class.colomat-close {
    color: red;
    border: 2px dotted red;
}

Shortcode

[expand title="Trigger Text" trigclass="my_special_class"]Hidden Content[/expand]

Result

Trigger Text
Hidden Content
Posted on

Nested Collapse Elements with Highlander Grouping

Here is a typical nested collapse group with highlander grouping

[expand title="state1" id="state1" togglegroup="state-highlander"]
   [expandsub1 title="city1" id="city1" togglegroup="city-highlander"]bar1 bar2[/expandsub1]  
   [expandsub1 title="city2" id="city2" togglegroup="city-highlander"]bar3 bar4[/expandsub1]
[/expand]

[expand title="state2" id="state2" togglegroup="state-highlander"]
   [expandsub1 title="city3" id="city3" togglegroup="city-highlander"]bar5 bar6[/expandsub1]  
   [expandsub1 title="city4" id="city4" togglegroup="city-highlander"]bar7 bar8[/expandsub1]
[/expand]

Notice how the main level and nested sub-elements have their own highlander grouping defined. This makes it so the main level items do not affect the nested children expand/collapse states.
This is how it works:

state1
city1
bar1 bar2
city2
bar3 bar4
state2
city3
bar5 bar6
city4
bar7 bar8

Now to do the exact same thing using the roll-your-own method:

<div class="collapseomatic" id="state1"  title="state1" data-togglegroup="state-highlander">state1</div>
<div id="target-state1" class="collapseomatic_content">
   <div class="collapseomatic" id="city1" title="city1" data-togglegroup="city-highlander">city1</div>
   <div id="target-city1" class="collapseomatic_content">bar1 bar2</div>
   <div class="collapseomatic" id="city2" title="city2" data-togglegroup="city-highlander">city2</div>
   <div id="target-city2" class="collapseomatic_content ">bar3 bar4</div>
</div>

<div class="collapseomatic" id="state2" title="state2" data-togglegroup="state-highlander">state2</div>
<div id="target-state2" class="collapseomatic_content">
   <div class="collapseomatic" id="city3" title="city3" data-togglegroup="city-highlander">city3</div>
   <div id="target-city3" class="collapseomatic_content">bar5 bar6</div>
   <div class="collapseomatic " id="city4" title="city4" data-togglegroup="city-highlander">city4</div>
   <div id="target-city4" class="collapseomatic_content">bar7 bar8</div>
</div>
Posted on

Collapse-Pro-Matic Roll Your with Scroll To Elements

The roll-your-own method has already been documented, however, what if you wanted to create your own sroll-to targets for each element? How can we do this with roll-your-own?

First we create an example using the shortcode:

[expand title="trigger text" findme="auto"]hidden content[/expand]

trigger text
hidden content

Now we re-create that using the roll-your own elements:

The Trigger

<div class="collapseomatic find-me" id="my_example" title="trigger text" data-offset="-60" data-findme="auto">trigger text</div>
trigger text

The Target

<div id="target-my_example" class="collapseomatic_content ">Target Content</div>
Target Content