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>