Monaca Onsen UI Discord Chat Github Repo

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?


  • administrators

    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!