Birthday: January 11th
December 2016
February 2017

Posted on

Grouping Collapse-Pro-Matic Setall Subexpands

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

main 1
This is the first main section and it has multiple sub sections:
sub a
sub section a
sub b
sub section b
sub c
sub section b
main 2
This is the second main section and it has multiple sub sections:
sub d
sub section d
sub e
sub section e
sub f
sub section f

Shortcode Triggers

Expand All
Expand Main
Expand Sub
Expand Group 1

Roll-Your-Own Triggers

Expand All
Collapse All
Expand All Toggle
Expand Group 1 Toggle

Orphan Element

This is an expand element is not grouped with anything.

Pee Wee The Loaner
I am a loaner, Dotty. There are things about you me wouldn’t understand…. you shouldn’t understand