Introducing a new shortcode for T(-) Countdown Control that will print out the launch date:
Countdown launches at: [[tminus_launch_date cid="1921" format="Y-m-d"]]
Countdown launches at: [tminus_launch_date cid=”1921″ format=”Y-m-d”]
A Pluginoven Test Site
Introducing a new shortcode for T(-) Countdown Control that will print out the launch date:
Countdown launches at: [[tminus_launch_date cid="1921" format="Y-m-d"]]
Countdown launches at: [tminus_launch_date cid=”1921″ format=”Y-m-d”]
select your year…
This is how you modify the print-icon to have it show up in a simple menu. If we start with a simple right-aligned menu:
<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | [print-me]</p>
See how the icon jumps to it’s own line?
Collapse All |
|Let’s fix that.
Step one, assign a some new CSS rules for an id element:
#my_print_id {
display: inline-block;
}
#my_print_id:before, #my_print_id:after{
content: none;
}
Step two, insert a roll-your-own* version of the shortcode like so:
<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | <span class="printomatic pom-small" id="my_print_id"><input type="hidden" id="target-my_print_id" value="article"></span></p>
BAM, it’s working*:
Collapse All |
|*Note: the roll-your-own method shown above only works for print-o-matic versions 1.5.7 and older. This will not work with print-pro-matic or versions 1.6.0 or newer.
Now lets’s try something new. We have added tag and class attributes to version 1.6.0 so we can now do something like:
.my_print_class {
display: inline-block;
}
.my_print_id:before, .my_print_id:after{
content: none;
}
And we add our shortcode with the new tag and class attributes:
<p style="text-align: right;"><span class="expandall">Expand All</span> | <span class="collapseall">Collapse All</span> | [print-me printstyle="pom-small" class="my_print_class" tag="span"]</p>
Collapse All |
|Here it is:
[tminus cid="1031"]
Test of the new Template feature in Collapse Commander. Template 1885 should expand the target above the trigger.
[expand title="Trigger Text" template_id="1885"]This is a test using template number 1885[/expand]
Example using cid:
[expand cid="2039"/]
Alt Test
Expand Trig:
Expand Targ:
Here is a simple example of how you can create nested expand elements using the shortcode:
[expand title="state1" id="state1"]
[expandsub1 title="city1" id="city1"]bar1
bar2[/expandsub1]
[expandsub1 title="city2" id="city2"]bar3
bar4[/expandsub1]
[/expand]
Here is a similar example of nested expand elements using the Roll-Your-Own method:
<div class="collapseomatic" id="state2" title="state2">state2</div>
<div id="target-state2" class="collapseomatic_content " style="display: none;">
<div class="collapseomatic" id="city3" title="city3">city3</div><div id="target-city3" class="collapseomatic_content " style="display: none;">bar5<br>
bar6</div>
<div class="collapseomatic" id="city4" title="city4">city4</div><div id="target-city4" class="collapseomatic_content " style="display: none;">bar7<br>
bar8</div>
</div>
~~~
Here is a four level deep nested test using shortcodes:
Agile Team Accelerator
Expandsub4
Embedded Agile Coaching
Technical Agile Coaching
Executive Session for Agile
Introducing ‘togglegroup’ a new attribute that can be used instead of rel and highlander grouping for collapseall/expandall/setall toggles.
Here is a list of expand elements with nested expansub elements:
[expand title="main 1" rel="main-highlander" togglegroup="group_1"] This is the first main section and it has multiple sub sections:
[expandsub1 title="sub a" rel="sub-highlander" togglegroup="group_1"]sub section a[/expandsub1]
[expandsub1 title="sub b" rel="sub-highlander" togglegroup="group_1"]sub section b[/expandsub1]
[expandsub1 title="sub c" rel="sub-highlander" togglegroup="group_1"]sub section b[/expandsub1]
[/expand]
[expand title="main 2" rel="main-highlander" togglegroup="group_1"] This is the second main section and it has multiple sub sections:
[expandsub1 title="sub d" rel="sub-highlander" togglegroup="group_1"]sub section d[/expandsub1]
[expandsub1 title="sub e" rel="sub-highlander" togglegroup="group_1"]sub section e[/expandsub1]
[expandsub1 title="sub f" rel="sub-highlander" togglegroup="group_1"]sub section f[/expandsub1]
[/expand]
And here is a list of the different types of expandall/collapseall and toggle triggers that may be used.
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall"/]
[expand title="Expand Main" swaptitle="Collapse Main" trigclass="setall" rel="main-highlander"/]
[expand title="Expand Sub" swaptitle="Collapse Sub" trigclass="setall" rel="sub-highlander"/]
[expand title="Expand Group 1" swaptitle="Collapse Group 1" trigclass="setall" togglegroup="group_1" /]
<span class="expandall">Expand All</span>
<span class="collapseall">Collapse All</span>
<span class="collapseomatic setall noarrow" id="my_toggle_id" title="Expand All">Expand All Toggle</span>
<span id="swap-my_toggle_id" class="colomat-swap" style="display:none;">Collapse All Toggle</span>
<span class="collapseomatic setall noarrow" id="my_other_toggle_id" title="Expand Group 1" data-togglegroup="group_1">Expand Group 1 Toggle</span>
<span id="swap-my_other_toggle_id" class="colomat-swap" style="display:none;">Collapse Group 1 Toggle</span>
Collapse All
Expand All Toggle
Expand Group 1 Toggle
This is an expand element is not grouped with anything.
the alt attribute is causing the html to not validate properly. Here is a test to ensure it does not show up anymore:
[expand title="Expand all" swaptitle="Swap all" trigclass="setall" rel="main" notitle="true"]this is a test[/expand]
With SwapAlt:
[expand title="Monkey" alt="click for donkey" swaptitle="Donkey" swapalt="click for monkey" notitle="true"]this is a test[/expand]
One of the more common support issues with Collapse-O-Matic are related to unwanted spacing between collapse elements. While there are a number of reasons why this happens, the most common issues are extra ‘p’ or ‘br’ tags being added due to the strange way the wpautop filter. Often the spacing issue can be resolved by wrapping the expand elements in a div, removing any extra spacing or hard-returns between the expand elements, adjusting css, using different expand html elements (such as the ‘li’ element), or using the Collapse Commander add-on.
Example of a simple list using Collapse-O-Matic:
[expand title="Item One"]
This is some special text to display about item one
[/expand]
[expand title="Item Two"]
This is some special text about item two to display
[/expand]
[expand title="Item Three"]
Item three also has some special text to be displayed
[/expand]
Example using UL and LI elements:
<ul>
[expand title="Item One" tag="li"]
This is some special text to display about item one
[/expand]
[expand title="Item Two" tag="li"]
This is some special text about item two to display
[/expand]
[expand title="Item Three" tag="li"]
Item three also has some special text to be displayed
[/expand]
</ul>
Example of a list using Collapse-Commander
[expand cid="1765"/]
[expand cid="1766"/]
[expand cid="1767"/]
example of internal content list without using filter attribute:
[expand title="Standard"]
This is some text on the first line
This is some text on the second line
This is some text on the third line
[/expand]
example of internal content list using filter attribute:
[expand title="Filtered" filter="true"]
This is some text on the first line
This is some text on the second line
This is some text on the third line
[/expand]
This is some text on the first line
This is some text on the second line
This is some text on the third line