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>

SushiMan

Is this still not possible or is it somehow?

emccorson

Expandable lists weren’t designed to be nested, but it does look like it sort-of half works. I ran your code in the playground, and it all works except for the chevrons appear to point the wrong way for the nested items.

If this is a feature that you feel strongly Onsen should have, please open up a GitHub issue for it: https://github.com/OnsenUI/OnsenUI/issues

In the issue please add:

How you expect the nested list items to behave. For example, should collapsing a parent item cause the child items to also collapse or not?
What the use case is for nested expandable list items. I haven’t seen them in an app before and I’m not sure whether it’s a useful feature to have, so please make the case for adding the feature!