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*
Collapse 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"/]
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.
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>
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:
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:
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>
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.
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.
<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
Read Less
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
Read Less
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
Expand All Pure Science
