Collapse-Pro-Matic Advanced External Triggers

There are times when it would be nice to turn ANY element into an external trigger for a collapse element. So as of Collapse-Pro-Matic v 1.2.9f we have added:

  • new colomat_trigger class that turns anything into a trigger
  • new external_trigger shortcode element to enter the ids of the elements that should be used as an external trigger
  • new data-external-element attribute that can be used for roll-your-own collapse elements
  • new colomat_expand_only class that prevents the external trigger from collapsing the target, only expand
  • new colomat_collapse_only class that prevents the external trigger from expanding the target, only collapse

And this is how it works:

take any element, make sure it has a unique id and the colomat_trigger class assigned.

<h4 id="funkmaster" class="colomat_trigger">Bootsy</h4>

Bootsy

additional external link can be assigned, and external links that will only expand (not collapse) the target:

<h4 id="flash" class="colomat_trigger colomat_expand_only">Grandmaster Flash</h4>

Grandmaster Flash

Next, assign the ID of the external id (or multiple ids) using the external_trigger attribute:

[expand title="Who has the funk?" external_trigger="funkmaster flash"]You got the funk![/expand]
Who has the funk?
Glory be, baby, you got the funk!

Collapse-Pro-Matic Class Triggers

As of version 1.3.2 of Collapse-Pro-Matic an external trigger can also be assigned to any element using only class names. For example, using a WordPress menu element, where only the classes can be assigned. The following classes must be added to the trigger:

  • collapseomatic
  • noarrow
  • colomatclasstrigger
  • colomatid-[the_target_id]

[expand title="This is the Master Trigger" id="multi-trigger"]

This is the Master Trigger
This is some text that when you click on the trigger you are able to read with your eyes. Well, your eyes are able to see the text, but I guess it’s actually your brain that reads the words and makes sense of them. But jokes on you! There is no sense to be made from these words because they are just pure jibber-jabber.

Links

The following is a link that has an href attribute of “#multi-trigger” and a class of “expandanchor”. Clicking this will scroll-to and expand-only the element.

<a class="expandanchor" href="#multi-trigger">Anchor Link to Multi-Trigger%lt;/a>

Anchor Link to Multi-Trigger

Buttons

Buttons are not links, however if it contains the same href and class values as the link above it will expand-only the target, just not scroll to it.

<button class="expandanchor" href="#multi-trigger">Button to Multi-Trigger</button>

Buttons Wrapped in a Link

This is basically a button that is wrapped in a link described above. Notice that the text link must be clicked, not the button.

<a class="expandanchor" href="#multi-trigger"><button>Anchor Button linked to Multi-Trigger</button></a>

Link Wrapped in a Button

This is a link that is wrapped in a button as described above:

<button><a class="expandanchor" href="#multi-trigger">Button Anchor linked to Multi-Trigger</a></button>

Special Applications: Buttons

Here are a few ordinary buttons, each assigned with a) a unique id, and b) colomat_trigger colomat_expand_only and snap-shut classes like so:

<button id="button_one" class='colomat_trigger colomat_expand_only snap-shut'>Button One</button>

Each button needs to correspond to a target. Normally to create the target it would be part of the trigger but we add the narrow and hidden classes using the trigclass attribute and remove the target padding using the targclass attribute like so:

[expand title="Button 1" external_trigger="button_one" rel="buttons-highlander" trigclass="noarrow hidden" targclass="no_left_margin"]Button One[/expand]

We then added the following CSS under the Custom CSS area of the theme (if available) or the collapse-pro-matic plugin settings:

.hidden {
   display: none;
}
.no_left_margin {
   margin-left: 0;
}
Content One
Content Two
Content Three

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 Collapse-Pro-Matic Inline Test

Test 1

<h7>Test Header</h7>
<strong>Strong Text</strong>
This is a bit of text that goes on for awhile just to create the illusion that there is something important to say. After some time we might want to create a little teaser for [expand title="Read more" swaptitle="Read Less" trigclass="arrowright" targpos="inline" targtag="span" trigpos="below"]this text that was hidden but now is not. [/expand]

Test Header
Strong Text
This is a bit of text that goes on for awhile just to create the illusion that there is something important to say. After some time we might want to create a little teaser for this text that was hidden but now is not.

Read more

What if we placed all of this inside a LI element:

  • Test Header
    Strong Text
    This is a bit of text that goes on for awhile just to create the illusion that there is something important to say. After some time we might want to create a little teaser for this text that was hidden but now is not.
    Read more

Paragraphs

If the shortcode needs to be placed inside a paragraph, it’s best to use the roll-your-own method like so:

This is a paragraph of text that we just are going to throw in here. You might not like the text, as it really just rambles on and on, but it does fill the purpose of filler text. this is the <div id="target-paratest" class="collapseomatic_content_inline colomat-inline span_fix" style="display: inline;">last text in the first paragraph.
<p>This is the next paragraph of text</p>
<p>This is the final paragraph of text</p></div> <span class="collapseomatic span_fix noarrow" id="paratest" title="Read more..." tabindex="0">Read more...</span> <span id="swap-paratest" class="colomat-swap" style="display:none;">Read less...</span>
<p>Now let's see what happens.</p>

This is a paragraph of text that we just are going to throw in here. You might not like the text, as it really just rambles on and on, but it does fill the purpose of filler text. this is the

last text in the first paragraph.
This is the next paragraph of text

This is the final paragraph of text

Read more…

Now let’s see what happens.

Collapse-O-Matic – Inline Roll-Your-Own Triggers

This is a follow-up post to Collapse-O-Matic > Line of Trigger Images. This time we want to have the triggers in-line but the content to be displayed below the trigger line. To do this we first must use the roll-your-own method.

Triggers:

<span class="collapseomatic" id="item_one" rel="item-highlander">Trigger One</span> <span class="collapseomatic" id="item_two" rel="item-highlander">Trigger Two</span> <span class="collapseomatic" id="item_three" rel="item-highlander">Trigger Three</span>

Targets:

<div id="target-item_one" class="collapseomatic_content ">Target One</div>
<div id="target-item_two" class="collapseomatic_content ">Target Two</div>
<div id="target-item_three" class="collapseomatic_content ">Target Three</div>

The Results:

Trigger One Trigger Two Trigger Three

Target One
Target Two
Target Three

Collaspse-Commander

The same thing with collapse commander would look like this:

[expand_trig cid="2119" /] [expand_trig cid="2120" /] [expand_trig cid="2121" /]
[expand_targ cid="2119" /] [expand_targ cid="2120" /] [expand_targ cid="2121" /]

Results:
Item One Item Two Item Three

Target One

Target Two

Target Three

Collapse-O-Matic Table of Content Test

This is a test that features a table of content from the Table of Content plugin as well as a collapse-o-matic expand element AND a collapse-commander element.
[toc wrapping=”right”]

This is an H1 heading

This is a heading

This is the content area and it has a collapse element in it:

[expand title="This is the expand element"]...and this is the target content[/expand]
This is the expand element
…and this is the target content

This is another h2 heading

This is an expand element element from Collapse Commander:

[expand cid="1398"/]
Test Expand Element
This is the content of the expand element early_oculous

This is a third h2 element

  • list item
  • list item
  • list item
  • list item

This is another H1 heading

Fourth heading element

Fifth heading, how do you like it?

Collapse-O-Matic TrigPos Test

This is a quick test of the trigpos attribute.

Normally, an expand element shortcode looks and works like this:

[expand title="trigger"]hidden content[/expand]
trigger
hidden content

now we are going to add the trigpos attribute:

[expand title="trigger" trigpos="below"]hidden content[/expand]
hidden content
trigger

And this works exactly the same way for collapse-pro-matic, of course.

Collapse-O-Matic FAQ Trigger by Mouse Hover

Q: Can this work on mouseover or hover?

A: This is a question we get quite often. The plugin does not work with hover. We have created custom versions for clients in the past that does this, however you really need to think through how you will deal with touch devices that do not have a ‘hover’ state.

Also, when you hover over and item, how will your user close it? On mouse HoverOut is the easy answer, but then the user can never select or click on anything in the target area.

In short, it can be done but it’s a complex interaction that needs to be well planned out.

Here is an example of a plugin we custom built for a client.

Collapse-O/Pro-Matic CSS Tricks II – Font Awesome Arrows

First make sure Font Awesome is installed.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Or use a plugin such as Font Awesome Icons to have it installed for you.

We are going to use the following two Font Awesome Arrows:

<i class="fa fa-arrow-circle-down"></i>

<i class="fa fa-arrow-circle-up"></i>

Next we want to create a new class for these arrows. We are going to use the name awesomearrows. The class definitions need look like so:

.collapseomatic.awesomearrows {
    background-image: none;
}
.collapseomatic.awesomearrows:before {
    font-family: FontAwesome;
    content: "\f0ab";
}
.colomat-close.awesomearrows {
    background-image: none;
}
.colomat-close.awesomearrows:before {
    font-family: FontAwesome;
    content: "\f0aa";
}

Now we need to assign the trigclass attribute our value of ‘awesomearrows’

[expand title="Trigger Text" trigclass="awesomearrows"]Target Content[/expand]
Trigger Text
Target Content