Hi,
i want to integrate expandable list in my project.like i have created a list and now i have to some child of each row into the list.when i will click on the any row of the list that time it will show its child elements with the expandable effect and other row’s child element will hide.
Can you tell me how it will done?
Thanks in advance.
You mean like an accordion? How does something like this work for you?
Thanks @mhartington for your response.
Its looks great, but tell me one thing that in this example you are showing another list items as a child of the main List row.
my problem is that i have to show some Input text as child of the main List row.
for example i have list of 3 rows, if i’ll click on first one than that row should be expand and some input text will be visible and when i’ll click on second row than input text under first row will be hide and some input text will be visible under second row and so on.
Can you suggest me how it will done.
Thanks in advance.
If I understand correctly, you mean like this?
If I’m way off, would you mind putting together a codepen to help me understand better?
Edit: You’ll have to click on the plus icon to expand it, only way to let you expand the list
Hi guys,
Do you have an example, how the same (accordion) can be done with collection-repeat?
Regards,
Aliaks
You could technically do it for the outer-most element, but I wouldn’t suggest it.
Hi @mhartington I am new to ionic. Would you please be able to give me some example code of an accordion containing static content. With angular UI Bootstrap it is easy to implement accordions with static content. It doesnt seem as easy with ionic.
Any help would be greatly appreciated.
Many thanks
Thank you very much @mhartington for your reply
This generates dynamic content as opposed to static content.
I would like to only open one list item at a time.
can this be done using collection-repeat? When using it in the provided sample, the expanded div is not shown…
Hi guys im trying to implement this need some help 
what i want is when i press the group 1 only the group 1 in that question category is expanded instead of all the group i couldnt brain it…
I’m having trouble with resizing the view when an accordion is closed unless the view is scrolled. Since the accordion content is larger that the screen/remaining content, I get blank space until it is scrolled. The easiest way to understand what I mean is to see it.
I’ve tried various combinations of $ionicScrollDelegate.resize(), $ionicScrollDelegate.scrollBottom(), $scope.apply, $timeout, etc. and I can’t figure it it.
Hi mhartington,
I tested in a blank project and works fine, but in my project i can’t make it work…
I want to use an accordion list in an html inside in “Templates” folder, but I don’t know where I paste the js code…
I’m new with ionic, and I try to undersand this, why gave me an error of undefined function?
Plese help me.
Cheers
Hi Emily,
Did you get anywhere with this? I am having exact same issue and pulling my hair out to get it resolved. If you could share your solution would be highly appreciated.
Thank you.
I haven’t actually found a solution for this. I was actually just thinking about revisiting this problem, I can let you know if I have any success!
Please do, thanks! I am looking into this too, will let you know if I found a solution.
I have also get this blank space until it is scrolled. I just did following. Problem solved.
$scope.toggleStage = function(stage) {
if ($scope.isStageShown(stage)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = stage;
}
$timeout(function () {
$ionicScrollDelegate.resize();
}, 100);
};
Hi emily,
Do you have the solution? How do you expand by tap the view all sensors?
I have issues with that part
hello @mhartington
can you please tell me where is the logic of closing one item when you click on second item?
Because i am using ionic latest version so i had to create that code in TypeScript
Thank you