Roll-Your-Own Nested Expands

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]
state1
city1
bar1
bar2
city2
bar3
bar4

Roll-Your-Own

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

~~~

Here is a four level deep nested test using shortcodes:

+ Coaching (Team Services)

+ Coaching Engagements

Agile Team Accelerator

Expandsub4

this is the fourth estate

Embedded Agile Coaching

Technical Agile Coaching

Executive Session for Agile

Coaching Workshops

Sandbox

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.