Birthday: July 15th

June 2019

August 2019

This is a test for integrating T(-) Countdown with Gutenberg Blocks.
First, we need to tidy up how the Javascript is being used. Here is a basic countdown that uses a gutenberg block set to 2 minutes.

Now let’s try a shortcode with a launch target of an external element.

[tminus t="+10 secs" launchtarget="#monkeymonk"]monkey is in space… space monkey![/tminus]

Of course, we can still use the old countdown (default), above and below targets:

[tminus t="+10 secs" launchtarget="tophtml"]this is the tophtml target area[/tminus]

[tminus t="+10 secs" launchtarget="bothtml"]this is the bothtml target area[/tminus]

Default/Left Arrow:
[expand title="arrow to the left"]<-- see that, that's left[/expand]]
[expand title="arrow to the left"]<-- see that, that's left[/expand] Right Arrow: [[expand title="arrow to the right" trigclass="arrowright"]checkout what is to the right -->[/expand]

No Arrow:
[expand title="no arrow to be found" trigclass="noarrow"]the arrow is not to be found[/expand]

Both Left & Right Arrow:
This method requires the extra-trigger feature of Collapse-Pro-Matic and must be built using the roll-your-own method and a bit of css:

Magic CSS

Place the following css in the collapse-o-matic (or collapse-pro-matic) plugin options page, under Custom Style:

.magic_beans {
display: inline;
float: left;
margin-right: 1.2em;
}

.clear {
clear: both;
}


Roll-Your-Own Method w/ Magic CSS

<div class="collapseomatic magic_beans" id="doublearrow" title="double arrows!">double arrows!</div><div class="collapseomatic magic_beans" id="extra-doublearrow"></div>
<div id="target-doublearrow" class="collapseomatic_content clear"><--to the left, to the right--></div>