# Accordion List **URL:** \ **Category:** demo\ **Created:** [April 9, 2014, 10:16pm UTC](https://forum.ionicframework.com/t/accordion-list/2832 "2014-04-09T22:16:16Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\ **Post date:** [April 9, 2014, 10:16pm UTC](https://forum.ionicframework.com/t/accordion-list/2832/1 "2014-04-09T22:16:16Z")
Saw that someone wanted an accordion. Well thanks to angular, ngAnimate, and the list css … here it is. https://codepen.io/ionic/embed/preview/uJkCz?height=300&slug-hash=uJkCz&default-tabs=html,result&host=https://codepen.io ---
**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\ **Post date:** [April 9, 2014, 10:40pm UTC](https://forum.ionicframework.com/t/accordion-list/2832/2 "2014-04-09T22:40:19Z")
Awesome, thanks @andy! The inevitable question now is of course (are you ready?)… Would it be difficult to adapt this so only one item can be expanded at a time? So when you click on one closed item, any other opened items are closed and the one you click on opens? ---
**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\ **Post date:** [April 9, 2014, 11:20pm UTC](https://forum.ionicframework.com/t/accordion-list/2832/3 "2014-04-09T23:20:09Z")
What do you think? How would you do it? Is the current data structure adequate for that? What needs to be done when a divider is clicked? ---
**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\ **Post date:** [April 9, 2014, 11:52pm UTC](https://forum.ionicframework.com/t/accordion-list/2832/4 "2014-04-09T23:52:02Z")
> [@andy](#): > > [http://codepen.io/ionic/pen/Bztos/](http://codepen.io/ionic/pen/Bztos/) In jQuery I would be able to whip this up fairly quick, Angular is a different beast altogether. I suppose (and I’m just thinking out loud here) is that you would watch the classes of all the sections, and on ng-click flip the class of the section you clicked, while setting all the other classes you’re watching to !group.shown. Sort of like this: [http://codepen.io/anon/pen/fEsGn](http://codepen.io/anon/pen/fEsGn) But, now all groups are expanded / contracted when you click them. Maybe I’m thinking too much in jQuery terms here but I guess I’m looking for a ‘this’ variable to differentiate from the item you clicked, and all the other elements that should also react to the behavior, if that makes sense. ---
**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\ **Post date:** [April 10, 2014, 12:30am UTC](https://forum.ionicframework.com/t/accordion-list/2832/5 "2014-04-10T00:30:11Z")
Well all we need to do is have only one group ever shown at a time, right? What if we created a variable that stores the current shown group, and just change that? Super simple 🙂 [http://codepen.io/ionic/pen/uJkCz](http://codepen.io/ionic/pen/uJkCz) ---
**Author:** ![coen\_warmer](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/coen_warmer/32/64036_2.png) [@coen\_warmer](https://forum.ionicframework.com/u/coen_warmer)\ **Post date:** [April 10, 2014, 12:40am UTC](https://forum.ionicframework.com/t/accordion-list/2832/6 "2014-04-10T00:40:11Z")
@andy Man, you make it look easy. I was struggling with indexes, and I actually got kind of close, but I couldn’t wrap my head around the last part: [http://codepen.io/anon/pen/IDbkj/](http://codepen.io/anon/pen/IDbkj/) Angular can be quite the mind destroyer at times… Thanks Andy! I know I and others will be super happy with this element! ---
**Author:** ![phamaa](https://avatars.discourse-cdn.com/v4/letter/p/ecb155/32.png) [@phamaa](https://forum.ionicframework.com/u/phamaa)\ **Post date:** [April 10, 2014, 7:17am UTC](https://forum.ionicframework.com/t/accordion-list/2832/7 "2014-04-10T07:17:24Z")
It looks nice Andy! Will it be part of ionic components in the next release? ---
**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\ **Post date:** [April 10, 2014, 12:59pm UTC](https://forum.ionicframework.com/t/accordion-list/2832/8 "2014-04-10T12:59:43Z")
Well the point of this example is that you only need 15 lines of css and a few lines of code to get this done using angular. Just like many things, it doesn’t necessarily need to be a component. You can usually represent things easily with Angular. ---
**Author:** ![keithdmoore](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/keithdmoore/32/64408_2.png) [@keithdmoore](https://forum.ionicframework.com/u/keithdmoore)\ **Post date:** [June 19, 2014, 6:43pm UTC](https://forum.ionicframework.com/t/accordion-list/2832/9 "2014-06-19T18:43:46Z")
I think it would be really nice if there were a component for this. Thanks for putting together the code sample. At least we can use that. ---
**Author:** ![keithdmoore](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/keithdmoore/32/64408_2.png) [@keithdmoore](https://forum.ionicframework.com/u/keithdmoore)\ **Post date:** [June 24, 2014, 3:54pm UTC](https://forum.ionicframework.com/t/accordion-list/2832/10 "2014-06-24T15:54:17Z")
@andy [http://angular-ui.github.io/bootstrap/](http://angular-ui.github.io/bootstrap/) has a really nice accordion. I really hope that you will reconsider this in a future release. ---
**Author:** ![bernardo](https://avatars.discourse-cdn.com/v4/letter/b/c0e974/32.png) [@bernardo](https://forum.ionicframework.com/u/bernardo)\ **Post date:** [July 18, 2014, 11:59am UTC](https://forum.ionicframework.com/t/accordion-list/2832/11 "2014-07-18T11:59:51Z")
Hi @andy, great work with the Accordion, it was just what I needed for a project I’m working on. I added a couple of buttons to the activated item but only the text is doing the transition/accordion effect. You can see an example here: [https://www.dropbox.com/s/dgvl3cbvnry5jwe/accordion-example.mov](https://www.dropbox.com/s/dgvl3cbvnry5jwe/accordion-example.mov) Is this because of the buttons? Because the text works as expected. ---
**Author:** ![davidgang](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@davidgang](https://forum.ionicframework.com/u/davidgang)\ **Post date:** [October 27, 2014, 3:21pm UTC](https://forum.ionicframework.com/t/accordion-list/2832/12 "2014-10-27T15:21:01Z")
Hi, It would be great to have this as a directive. Maybe an ion-accordion 😄 Thanks, David ---
**Author:** ![FireCoding](https://avatars.discourse-cdn.com/v4/letter/f/b9e5f3/32.png) [@FireCoding](https://forum.ionicframework.com/u/FireCoding)\ **Post date:** [January 4, 2015, 9:31am UTC](https://forum.ionicframework.com/t/accordion-list/2832/13 "2015-01-04T09:31:15Z")
Great example. And I disgree with others that these should turn into components. Keep this beautiful framework nice and lean. It’s plenty versatile as is. I would rather have a bunch of examples like this and make my own directives than a gazillion components to bloat things to a crawl. ---
**Author:** ![dco5](https://avatars.discourse-cdn.com/v4/letter/d/a4c791/32.png) [@dco5](https://forum.ionicframework.com/u/dco5)\ **Post date:** [January 29, 2015, 5:26am UTC](https://forum.ionicframework.com/t/accordion-list/2832/15 "2015-01-29T05:26:44Z")
I was able to add the accordion to my app and everything is working perfectly. Except when I have a a list at the bottom of the screen right above the footer and I toggle it open to display the content inside the accordion, it will not let me scroll down to see the items right away. It takes 2 to 3 seconds and then it lets me scroll down to see the rest of the items. I have this problem in the phone an in the browser. Is anybody experiencing the same? Thanks. ---
**Author:** ![djett](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/djett/32/10369_2.png) [@djett](https://forum.ionicframework.com/u/djett)\ **Post date:** [January 29, 2015, 8:20am UTC](https://forum.ionicframework.com/t/accordion-list/2832/16 "2015-01-29T08:20:19Z")
@dco5 call the $ionicScrollDelegate resize() function at the end of your toggleGroup controller method. ---
**Author:** ![dco5](https://avatars.discourse-cdn.com/v4/letter/d/a4c791/32.png) [@dco5](https://forum.ionicframework.com/u/dco5)\ **Post date:** [January 29, 2015, 2:30pm UTC](https://forum.ionicframework.com/t/accordion-list/2832/17 "2015-01-29T14:30:16Z")
@djett Brilliant!!! Working perfectly now!!! Thank so much! I was sure it had to do with re sizing, but no idea how to go about it! ---
**Author:** ![tumain](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/tumain/32/107546_2.png) [@tumain](https://forum.ionicframework.com/u/tumain)\ **Post date:** [February 24, 2015, 8:27am UTC](https://forum.ionicframework.com/t/accordion-list/2832/18 "2015-02-24T08:27:00Z")
Thanks for this! How do you update the height of the content to take into account when a group option is tapped? For example if you press the last group you can’t see its contents or scroll down to them, because its outside of the content scroll area. ---
**Author:** ![azad11](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@azad11](https://forum.ionicframework.com/u/azad11)\ **Post date:** [February 25, 2015, 12:28pm UTC](https://forum.ionicframework.com/t/accordion-list/2832/19 "2015-02-25T12:28:20Z")
Hi, thanks for the snippet. Can u create a version without a “for-loop”? I want to make the accordion with static elements. ---
**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 5, 2015, 8:25am UTC](https://forum.ionicframework.com/t/accordion-list/2832/20 "2015-03-05T08:25:55Z")
Hi @andy Would you be able to please adjust the code pen to create a version without a “for-loop”? I would like to make an accordion with static elements. Many thanks Mark ---
**Author:** ![jhoanna](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jhoanna/32/81035_2.png) [@jhoanna](https://forum.ionicframework.com/u/jhoanna)\ **Post date:** [March 18, 2015, 3:39pm UTC](https://forum.ionicframework.com/t/accordion-list/2832/21 "2015-03-18T15:39:43Z")
Thanks, andy! 😊 [Next page](https://forum.ionicframework.com/t/accordion-list/2832.md?page=2)