# Expandable list in ionic **URL:** \ **Category:** uncategorized\ **Created:** [April 23, 2014, 5:26am UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297 "2014-04-23T05:26:56Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![freemain3](https://avatars.discourse-cdn.com/v4/letter/f/ac91a4/32.png) [@freemain3](https://forum.ionicframework.com/u/freemain3)\ **Post date:** [April 23, 2014, 5:26am UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/1 "2014-04-23T05:26:56Z")
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. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [April 23, 2014, 12:51pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/2 "2014-04-23T12:51:39Z")
You mean like an accordion? How does something like this work for you? > **[Accordion List: Nightly](https://codepen.io/ionic/pen/uJkCz)** > > An Ionic list directive... ---
**Author:** ![freemain3](https://avatars.discourse-cdn.com/v4/letter/f/ac91a4/32.png) [@freemain3](https://forum.ionicframework.com/u/freemain3)\ **Post date:** [April 23, 2014, 1:28pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/3 "2014-04-23T13:28:49Z")
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. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [April 23, 2014, 2:02pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/4 "2014-04-23T14:02:54Z")
If I understand correctly, you mean like this? > **[Accordion List: 1.0.0-beta.2](https://codepen.io/mhartington/pen/kIofy)** > > An Ionic list directive Forked from Ionic's Pen Accordion List: 1.0.0-beta.2. ... 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 ---
**Author:** ![alextrs](https://avatars.discourse-cdn.com/v4/letter/a/f9ae1b/32.png) [@alextrs](https://forum.ionicframework.com/u/alextrs)\ **Post date:** [November 24, 2014, 10:06pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/5 "2014-11-24T22:06:19Z")
Hi guys, Do you have an example, how the same (accordion) can be done with collection-repeat? Regards, Aliaks ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [November 24, 2014, 10:14pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/6 "2014-11-24T22:14:58Z")
You could technically do it for the outer-most element, but I wouldn’t suggest it. ---
**Author:** ![mark\_bigrock](https://avatars.discourse-cdn.com/v4/letter/m/e9bcb4/32.png) [@mark\_bigrock](https://forum.ionicframework.com/u/mark_bigrock)\ **Post date:** [March 2, 2015, 8:19pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/7 "2015-03-02T20:19:44Z")
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 ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [March 2, 2015, 8:21pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/8 "2015-03-02T20:21:50Z")
> **[Accordion List: Nightly](https://codepen.io/ionic/pen/uJkCz)** > > An Ionic list directive... ---
**Author:** ![mark\_bigrock](https://avatars.discourse-cdn.com/v4/letter/m/e9bcb4/32.png) [@mark\_bigrock](https://forum.ionicframework.com/u/mark_bigrock)\ **Post date:** [March 2, 2015, 8:33pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/9 "2015-03-02T20:33:37Z")
Thank you very much @mhartington for your reply This generates dynamic content as opposed to static content. > **[Accordion List: Nightly](https://codepen.io/anon/pen/LEBEme)** > > An Ionic list directive Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[Accordion List: 1.0.0-beta.2\](http://codepen.io/ionic/pen/Bztos/).... I would like to only open one list item at a time. ---
**Author:** ![gcarbo](https://avatars.discourse-cdn.com/v4/letter/g/96bed5/32.png) [@gcarbo](https://forum.ionicframework.com/u/gcarbo)\ **Post date:** [May 16, 2015, 6:32pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/10 "2015-05-16T18:32:05Z")
can this be done using collection-repeat? When using it in the provided sample, the expanded div is not shown… ---
**Author:** ![joevo2](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/joevo2/32/90496_2.png) [@joevo2](https://forum.ionicframework.com/u/joevo2)\ **Post date:** [June 17, 2015, 12:31pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/11 "2015-06-17T12:31:16Z")
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… > **[Accordion List: Nightly](https://codepen.io/anon/pen/EjvEJZ?editors=101)** > > An Ionic list directive Forked from \[Ionic\](http://codepen.io/ionic/)'s Pen \[Accordion List: 1.0.0-beta.2\](http://codepen.io/ionic/pen/Bztos/).... ---
**Author:** ![emily](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/emily/32/96015_2.png) [@emily](https://forum.ionicframework.com/u/emily)\ **Post date:** [July 28, 2015, 5:37pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/12 "2015-07-28T17:37:05Z")
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. ![image](https://global.discourse-cdn.com/ionicframework/original/2X/7/7f82cbb0464378c83bb557f3f3fdc66886d08737.gif) ---
**Author:** ![leugim\_ohlavrac](https://avatars.discourse-cdn.com/v4/letter/l/c6cbf5/32.png) [@leugim\_ohlavrac](https://forum.ionicframework.com/u/leugim_ohlavrac)\ **Post date:** [July 19, 2016, 8:14am UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/13 "2016-07-19T08:14:01Z")
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 ---
**Author:** ![irmantasluk](https://avatars.discourse-cdn.com/v4/letter/i/49beb7/32.png) [@irmantasluk](https://forum.ionicframework.com/u/irmantasluk)\ **Post date:** [September 7, 2016, 4:59pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/14 "2016-09-07T16:59:17Z")
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. ---
**Author:** ![emily](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/emily/32/96015_2.png) [@emily](https://forum.ionicframework.com/u/emily)\ **Post date:** [September 7, 2016, 6:28pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/15 "2016-09-07T18:28:25Z")
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! ---
**Author:** ![irmantasluk](https://avatars.discourse-cdn.com/v4/letter/i/49beb7/32.png) [@irmantasluk](https://forum.ionicframework.com/u/irmantasluk)\ **Post date:** [September 7, 2016, 8:46pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/16 "2016-09-07T20:46:03Z")
Please do, thanks! I am looking into this too, will let you know if I found a solution. ---
**Author:** ![ghosteye](https://avatars.discourse-cdn.com/v4/letter/g/edb3f5/32.png) [@ghosteye](https://forum.ionicframework.com/u/ghosteye)\ **Post date:** [November 2, 2016, 9:51am UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/17 "2016-11-02T09:51:58Z")
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); ``` }; ---
**Author:** ![bkcollection](https://avatars.discourse-cdn.com/v4/letter/b/a183cd/32.png) [@bkcollection](https://forum.ionicframework.com/u/bkcollection)\ **Post date:** [January 29, 2017, 8:29am UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/18 "2017-01-29T08:29:22Z")
Hi emily, Do you have the solution? How do you expand by tap the view all sensors? I have issues with that part ---
**Author:** ![MustafaLokhandwala](https://avatars.discourse-cdn.com/v4/letter/m/d2c977/32.png) [@MustafaLokhandwala](https://forum.ionicframework.com/u/MustafaLokhandwala)\ **Post date:** [December 6, 2017, 12:20pm UTC](https://forum.ionicframework.com/t/expandable-list-in-ionic/3297/19 "2017-12-06T12:20:12Z")
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