Accordion List

Saw that someone wanted an accordion. Well thanks to angular, ngAnimate, and the list css … here it is.

27 Likes

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?

1 Like

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?

1 Like

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

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.

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 :slight_smile:

http://codepen.io/ionic/pen/uJkCz

8 Likes

@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/

Angular can be quite the mind destroyer at times…

Thanks Andy! I know I and others will be super happy with this element!

It looks nice Andy! Will it be part of ionic components in the next release?

1 Like

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.

2 Likes

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.

@andy http://angular-ui.github.io/bootstrap/ has a really nice accordion. I really hope that you will reconsider this in a future release.

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:

Is this because of the buttons? Because the text works as expected.

Hi,

It would be great to have this as a directive.
Maybe an ion-accordion :smile:

Thanks,
David

2 Likes

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.

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.

@dco5 call the $ionicScrollDelegate resize() function at the end of your toggleGroup controller method.

1 Like

@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!

1 Like

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.

2 Likes

Hi, thanks for the snippet.

Can u create a version without a “for-loop”? I want to make the accordion with static elements.

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

Thanks, andy! :blush: