Monaca Onsen UI Discord Chat Github Repo

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.