Is it possible to have nested expandable lists?

darylldawn

I’m trying to create a nested accordion using onsen list items that would expand on tap. It will have around 3 levels.
I am not sure how to indicate which list item will expand on click.
I tried simulating it using the playground, but it seems like it doesn’t know which expandable-content should be expanded on tap.

Please let me know if this is possible, or if there is a much more efficient way of doing this. Thanks!

<ons-list>
  <ons-list-item expandable>
    Level 1
    <div class="expandable-content">
      <ons-list>
        <ons-list-item expandable>
          Level 2
          <div class="expandable-content">
            <ons-list>
              <ons-list-item expandable>
                Level 3
                <div class="expandable-content">Content</div>
              </ons-list-item>
            </ons-list>
          </div>
        </ons-list-item>
      </ons-list>
    </div>
  </ons-list-item>
</ons-list>