Season: Summer 2015

August 2015

October 2015

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]

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

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>

Button to Multi-Trigger

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>

Anchor Button linked to Multi-Trigger

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>

Button Anchor linked to Multi-Trigger

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>

Button OneButton TwoButton three

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;
}

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

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