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.

Collapsible Lists

  • Hello Again,

    I want to use to rewrite an older jQuery mobile app. I like the beauty of onsen’s components. However, each time I get started with the rewrite, I run into a feature that I need that is lacking in I decided to wait and give onsen a little more time to add features.

    Now, it is about a year later and I thought I’d try again. However, I can’t seem to find a collapsible list component. I see how to collapse a single item in, but not an entire list:

    Something like the following JQM code that collapses the entire list:

     <ul data-role="collapsible"  data-collapsed="true">
       <li> Item 1 </li>
       <li> item 2 </li>
       <li> item 3 </li>

    Maybe I’m not approaching the problem correctly. Can anyone help with a way to do this?

    In searching the forum, I found one question about collapsible here:
    darylldawn question: Is it possible?
    I tried the fix that he tried, but since the nested items didn’t display properly, I can’t use it for an app that is published.


  • administrators

    Onsen doesn’t have collapsible lists built in, just collapsible list items.

    However, you could put your list inside a list item:

      <ons-list-item expandable>
        Always shown
        <div class="expandable-content">
            <ons-list-item>item 1</ons-list-item>
            <ons-list-item>item 2</ons-list-item>

    You may need to mess about with the CSS if it looks a bit wonky, because ons-list-item is not really intended for containing ons-lists.

  • Thanks for your response. That helped to clarify. I’ll check back later to see if this has been added.