Test of a faster redirect when a countdown is already expired.
Collapse Grid Test
here we go:
[[collapse_grid cat_id="4" count="5"/]]
[collapse_grid cat_id=”4″ count=”5″/]
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
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