Is it possible to have nested expandable lists?
-
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>
-
Is this still not possible or is it somehow?
-
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!