Collapsible Lists
-
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
-
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 containingons-list
s.
-
Thanks for your response. That helped to clarify. I’ll check back later to see if this has been added.