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

Collapse-Pro-Matic Roll Your with Scroll Too Elements

The roll-your-own method has already been documented, however, what if you wanted to create your own sroll-to targets for each element? How can we do this with roll-your-own?

First we create an example using the shortcode:

[expand title="trigger text" findme="auto"]hidden content[/expand]
trigger text
hidden content
Now we re-create that using the roll-your own elements:

The Trigger

<div class="collapseomatic find-me" id="my_example" title="trigger text" data-offset="-60" data-findme="auto">trigger text</div>
trigger text

The Target

<div id="target-my_example" class="collapseomatic_content ">Target Content</div>
Target Content