3. Is it possible to have nested expandable lists?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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>
    0
  • S

    Is this still not possible or is it somehow?

    0
  • E
    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!
    0