Collapse-O/Pro-Matic Roll-Your-Own Method Slider Effect and Duration

Roll-Your-Own Method

We have already demonstrated how the new animation_effect and duration attributes work with a shortcode. Now we will show the same example but using the roll-your-own method. As always, the default effect is slideFade and duration is fast, but these can be overwritten globally in the plugin settings. As of version 1.7.3 these attributes can be applied on a collapse element basis using two new data-atributes: data-effect and data-duration.

<div class="collapseomatic" id="monkey" title="Monkeys">Monkeys</div>
<div id="target-monkey" class="collapseomatic_content">....</div>

<div class="collapseomatic" id="donkey" data-duration="slow" title="Donkeys">Donkeys</div>
<div id="target-donkey" class="collapseomatic_content">....</div>

<div class="collapseomatic" id="ninja" data-duration="1" data-animation_effect="slideToggle" title="Ninjas">Ninjas</div>
<div id="target-ninja" class="collapseomatic_content">....</div>
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).

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]

Ultimate Print-O-Matic Form Elements Test

This is a test for printing various forms using Print-O-Matic and Print-Pro-Matic plugins.

Standard HTML Form

This is some text inside the target div


Boy
Girl
Dog

OK, for some reason the current theme (Twenty-Seventeen) forces all form elements to display:none when printed. This works on other themes.
[print-me title="Print Standard HTML Form" alt="Print the HTML form" target="#html_form, #texter"/]
Print Standard HTML Form

Collapse-Pro-Matic – Pesky Hash-Bang URLs

This is a hash-bang: #!
Hash-bangs cause havoc or a number of reasons, but there is at least one example that directly affects how Collapse-O-Matic and Collapse-Pro-Matic process URLs. Take external triggers, for example:

[expand title="question 1" id="q1"]answer 1[/expand]
[expand title="question 2" id="q2"]answer 2[/expand]
<a class="expandanchor" href="#q1">expand question 1</a>
<a class="expandanchor" href="https://spacedonkey.de/2207/collapse-pro-matic-pesky-hash-bang-urls/#q2">

question 1
answer 1

question 2
answer 2

Internal link to expand question 1 from the same page.
External link to expand question 2 from anywhere.

So far, so good. But now, we add a link with a hash-bang:

<a class="expandanchor" href="https://spacedonkey.de/2207/collapse-pro-matic-pesky-hash-bang-urls/#!/monkey/wrench/#q2">answer 2 with a hash-bang monkey-wrench</a>

answer 2 with a hash-bang monkey-wrench

Collapse-Pro-Matic New Highlander Grouping Class Tricks

This is a test of a new highlander grouping class system that allows CSS and jQery to target the various stages of highlander grouping elements. The following elements have the rel="animal-highlander" attribute assigned. When a single element is expanded, then all closed elements in the group will be assigned a class of animal-highlander_closed. When all elements are collapsed none of the elements in the group will have this class assigned.

CSS

.animal-highlander_closed {
    color: #cccccc;
}

Shortcode

[expand title="Monkeys" rel="animal-highlander"]...[/expand]
[expand title="Donkeys" rel="animal-highlander"]...[/expand]
[expand title="Ninjas" rel="animal-highlander"]...[/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]

Extra Elements

What if we wanted a non-expand element to also be affected by the magic shown above? For example, what if an image should only be displayed when none of the highlander grouped elements where expanded. Hmmm, good question. Let’s see. The first idea would be to simply assign the same rel="[group_name]-highlander" attribute to the image. This will work, but what if it’s simply not possible to assign a rel attribute to an image? We have expanded the plugin to also search for any element that has a class that matches the value of the expand groups rel value. So simply add a [group_name]-highlander class to any element you want assigned the [group_name]-highlander_closed class when a single element is expanded.

CSS

.duck-highlander_closed {
    display: none;
}

External Element

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/grillhead-225x300.jpg" alt="grillhead" width="225" height="300" class="alignnone size-medium wp-image-338 duck-highlander" />

Shortcode

[expand title="Huey" rel="duck-highlander"]...[/expand]
[expand title="Dewey" rel="duck-highlander"]...[/expand]
[expand title="Louie" rel="duck-highlander"]...[/expand]

Example

grillhead

Huey
Huey was named after Huey Long (1893–1935) of Louisiana.

Dewey
Dewey was named after Admiral George Dewey (1837–1917) of the Spanish–American War.

Louie
Louie was named after animator Louie Schmitt (1908–1993).

Collapse-O-Matic Image And Text Trigger

This is a test to see if both an image and text can be used as a trigger.

Shortcode:

[expand title="<img src='https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg'><br/>Trigger Text" trigclass="noarrow"]Hidden Target Content[/expand]

Hidden Target Content

Without Text

[expand title="<img src='https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg'>" trigclass="noarrow"]Hidden Target Content[/expand]

Hidden Target Content

Roll-Your-Own Method

With Text

<div class="collapseomatic noarrow" id="some_id_one" title="Hover over Trigger Text"><img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg"/></br>Trigger Text</div>
<div id="target-some_id_one" class="collapseomatic_content ">Hidden Target Content</div>

Trigger Text
Hidden Target Content

Without Text

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" class="collapseomatic noarrow" id="some_id" title="Hover over Trigger Text">
<div id="target-some_id" class="collapseomatic_content ">Hidden Target Content</div>

Hidden Target Content

Roll-Your-Own Image Trigger with Swap Image

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" class="collapseomatic noarrow" id="some_other_id" title="Click to Expand">

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/grillhead.jpg" class="collapseomatic noarrow" style="display:none" id="swap-some_other_id" title="Click to Collapse">

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

Hidden Target Content

Collapse-Pro-Matic Highlander Cookie Test

This test will use both highlander grouping and cookies. The end result should be that every time a visitor returns to the page, the existing expand/collapse state is recalled.

[expand title="Monkey" rel="animal-highlander" cookiename="monkey"]Target Content[/expand]
[expand title="Donkey" rel="animal-highlander" cookiename="donkey"]Target Content[/expand]
[expand title="Sasquatch" rel="animal-highlander" cookiename="sasquatch"]Target Content[/expand]

Monkey
Target Content

Donkey
Target Content

Sasquatch
Target Content