Nested Collapse Elements with Highlander Grouping

Here is a typical nested collapse group with highlander grouping:

[expand title="state1" id="state1" rel="state-highlander"]
   [expandsub1 title="city1" id="city1" rel="city-highlander"]bar1
bar2[/expandsub1]
   [expandsub1 title="city2" id="city2" rel="city-highlander"]bar3
bar4[/expandsub1]
[/expand]
[expand title="state2" id="state2" rel="state-highlander"]
   [expandsub1 title="city3" id="city3" rel="city-highlander"]bar5
bar6[/expandsub1]
   [expandsub1 title="city4" id="city4" rel="city-highlander"]bar7
bar8[/expandsub1]
[/expand]

Notice how the main level and nested sub-elements have their own highlander grouping defined. This makes it so the main level items do not affect the nested children expand/collapse states.
This is how it works:

state1
city1
bar1
bar2
city2
bar3
bar4
state2
city3
bar5
bar6
city4
bar7
bar8

Now to do the exact same thing using the roll-your-own method:

<div class="collapseomatic" id="ryo_state1" rel="state-highlander" title="state1">state1</div>
<div id="target-ryo_state1" class="collapseomatic_content">

    <div class="collapseomatic" id="ryo_city1" rel="city-highlander" title="city1">city1</div>
    <div id="target-ryo_city1" class="collapseomatic_content">
         bar1
         bar2
    </div>

    <div class="collapseomatic" id="ryo_city2" rel="city-highlander" title="city2">city2</div>
    <div id="target-ryo_city2" class="collapseomatic_content">
         bar3
         bar4
    </div>
</div>

<div class="collapseomatic" id="ryo_state2" rel="state-highlander" title="state2">state2</div>
<div id="target-ryo_state2" class="collapseomatic_content">

     <div class="collapseomatic" id="ryo_city3" rel="city-highlander" title="city3">city3</div>
     <div id="target-ryo_city3" class="collapseomatic_content">
         bar5
         bar6
     </div>

    <div class="collapseomatic" id="ryo_city4" rel="city-highlander" title="city4">city4</div>
    <div id="target-ryo_city4" class="collapseomatic_content">
         bar7
         bar8
    </div>
</div>

And the results:

state1
city1
bar1
bar2
city2
bar3
bar4
state2
city3
city4
bar5
bar6
bar7
bar8

Leave a Reply

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