How to create collapsible list in ionic

ionic-v1
1

Hi guys! I am in trouble in creating collapsible list view in ionic.Here is the screenshot of what I want.


I want to have a list view when I click on any list item it should show the sub-list as shown in the screenshots.
Also note the both lists(outer and inner should be dynamic/both use ng-repeat).
So please let me know the solution to my problem
Thanks.

2

@mhartington solution?

3

Build a custom styled, nested list?
Your controller could have a function, which sets a scope variable to show/hide sublist of an entry.

<ul>
  <li ng-click="showSubList()">
     <ul ng-show="showSublist">
        <li></li>
     </ul>
  </li>
</ul>
4

@bengtler I Tried it but can’t achieve what i want.
anyway to create using ionic list.?

5

Refer to this codepen, this will help you & no need for a custom UI control

Regards,
Sat

2 Likes
6

Yep that works, but your dom structure does not reflect what you see.
I am not a friend of that.
Because if i develop webapps or websites sometimes it is necessary to have a DOM structure reflecting what you really see for e.g. search engines.
Now it looks like your sub-items are siblings of the main items.

But he could easly nest ion-lists (playing around with classes that it looks like expected.

Greetz bengtler