Accordion List


#1

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


Accordion functionality missing in Ionic
#2

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?


#3

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?


#4

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.


#5

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


#6

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


#7

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


#8

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.


#9

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.


#10

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


#11

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.


#12

Hi,

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

Thanks,
David


#13

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.


#15

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.


#16

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


#17

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


#18

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.


#19

Hi, thanks for the snippet.

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


#20

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


#21

Thanks, andy! :blush: