Season: Winter 2014

February 2015

April 2015

Without Filter Attribute (default off)

Plain Text

[expand title="plain text"]This is just some blibber blabber text[/expand]

Text with Shortcode

[expand title="text with shortcode"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]

With Filter Attribute False

Plain Text

[expand title="plain text" filter="false"]This is just some blibber blabber text[/expand]

Text with Shortcode

[expand title="text with shortcode" filter="false"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]

With Filter Attribute True

Plain Text

[expand title="plain text" filter="true"]This is just some blibber blabber text[/expand]

Text with Shortcode

[expand title="text with shortcode" filter="true"]This is text with a shortcode [tminus_launch_date cid="1921" format="Y-m-d"][/expand]

select your year…
Select Year 2010 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023

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?

Expand All | 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*:

Expand All | 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:

The Jedi Way

.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>

Expand All | Collapse All |

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

Expand Trig:

Expand Targ:

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.

Shortcode

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

Roll-Your-Own

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

Demo

Expand Elements

Shortcode Triggers

Roll-Your-Own Triggers

Expand All
Collapse All
Expand All ToggleCollapse All Toggle
Expand Group 1 ToggleCollapse Group 1 Toggle

Orphan Element

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]