Year: 2016
May 2016
July 2016

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

Peanuts Character 555 95472

555 95472, or 5 for short, debuted in the September 30, 1963, strip, and appeared occasionally until the 1980s. A boy close in age to Charlie Brown and Linus van Pelt, 5 had brown spiky hair, and he wore an orange shirt with the number 5 on it. 5 was given a numerical name by his father, who was upset over the preponderance of numbers in people’s lives; when questioned, 5 clarified that this was not his father’s way of protesting, it was his way of “giving in.” His last name, 95472 (the accent is on the 4), was taken from the family’s ZIP code; it is also the zip code for Sebastopol, California, where Schulz lived at the time.

"5"
“5”
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
Posted on

Print-O-Matic External Buttons

this is a test element


As of version 1.6.7c we introduced a new printstyle value ‘external’ for Print-O-Matic. Now it is possible to create an external button to trigger a print in a less-hacky way. Here is an example of this works: To print the following div with an id of ‘print_me_please’:

<div id="print_me_please">This is our target print element</div>

First we create a kind of roll-your-own print trigger. The details that must be included are:

  1. a unique id
  2. a print-o-matic class such as printomatic or printomatictext
  3. a data-print_target attribute

For example:

<button id="my_print_button" class="printomatic" data-print_target="#print_me_please">Print Trigger</button>

Which will output:

The final thing we need to do is include a hidden print trigger using a print-me shortcode with the same id as our external trigger and the new external printstyle attribute. This shortcode must be placed someplace on the same page, and will load in all the required scripts and settings to make the print trigger work correctly.

[print-me id="my_print_button" printstyle="external"/]


This shortcode will not output anything to the page.
That’s it. You are done! Let us know on the WordPress Support Forum if you require any further assistance.

Posted on

Collapse-O-Matic Grouping and Expandall Issues

If we set up two groups for the sole purpose of creating expand/collapse all triggers that will only expand/collapse the related group we currently have to create something like:

Science Fiction:

[expand title="Star Wars" rel="fiction"]Alliance to Restore the Republic vs. Galactic Empire[/expand]
<span class="expandall" rel="fiction">Expand All Science Fiction</span>
<span class="collapseall" rel="fiction">Collapse All Science Fiction</span>

Pure Science:

[expand title="Space Race" rel="history"]USA vs. USSR[/expand]
<span class="expandall" rel="history">Expand All Pure Science</span>
<span class="collapseall" rel="history">Collapse All Pure Science</span>

Rel Example:

Science Fiction

  • Star Wars
    Alliance to Restore the Republic vs. Galactic Empire
  • Star Trek
    United Federation of Planets vs. Klingon Empire vs. Romulan Star Empire vs. Cardassian Union vs. the Borg vs. the Dominion
  • Battlestar Galactica
    Twelve Colonies vs. Cylon Empire

Expand All Science Fiction
Collapse All Science Fiction

Pure Science

  • Space Race
    USA vs. USSR
  • Ansari X Prize
    Scaled Composites vs. Many Others

Expand All Pure Science
Collapse All Pure Science

So this works, but what if we do NOT what the expanding of one group to automatically collapse any open items of other groups?

As of Collapse-O-matic version 1.7.1, two new attributes have been introduced to deal with exactly this issue. For the shortcode:
togglegroup='your_group_name'
and for the roll-your-own method:
data-togglegroup='your_group_name'

Science Fiction:

[expand title="Star Wars" togglegroup="fiction"]Alliance to Restore the Republic vs. Galactic Empire[/expand]
<span class="expandall" data-togglegroup="fiction">Expand All Science Fiction</span>
<span class="collapseall" data-togglegroup="fiction">Collapse All Science Fiction</span>

Pure Science:

[expand title="Space Race" togglegroup="history"]USA vs. USSR[/expand]
<span class="expandall" data-togglegroup="history">Expand All Pure Science</span>
<span class="collapseall" data-togglegroup="history">Collapse All Pure Science</span>
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" togglegroup="history"/]

Group Example:

Science Fiction

  • Star Wars
    Alliance to Restore the Republic vs. Galactic Empire
  • Star Trek
    United Federation of Planets vs. Klingon Empire vs. Romulan Star Empire vs. Cardassian Union vs. the Borg vs. the Dominion
  • Battlestar Galactica
    Twelve Colonies vs. Cylon Empire

Expand All Science Fiction
Collapse All Science Fiction

Pure Science

  • Space Race
    USA vs. USSR
  • Ansari X Prize
    Scaled Composites vs. Many Others

Expand All Pure Science
Collapse All Pure

Expand All*

Adding Highlander Grouping:

[expand title="Monkey" togglegroup="animal" rel="animal-highlander"]monkeys are fast[/expand]
[expand title="Donkey" togglegroup="animal" rel="animal-highlander"]donkeys are strong[/expand]
<span class="expandall" data-togglegroup="animal">Expand All Animals</span>
<span class="collapseall" data-togglegroup="animal">Collapse All Animals</span>
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" togglegroup="animal"/]
  • Monkey
    Monkeys are fast
  • Donkey
    Donkeys are strong

Expand All Animals
Collapse All Animals

Expand All*

*collapse-pro-matic only