Collapsible Lists

[LittleOldLady]

Hello Again,

I want to use onsen.io 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 onsen.io. 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 onsen.io, 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>
</ul>

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.

TIA

[emccorson]

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

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

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

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.

[LittleOldLady]

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