Accordion List Ionic?

Ionic Framework ionic-v3
1

Someone know how can i use accordion list on ionic 3?

I don’t find any solution =(
… only ionic 1 and 2

2

Accordion list can be easily made using CSS3 & HTML5:

These examples will work on all versions of Ionic.

1 Like
3

Im searching for one ionic version… This does not seem to be the best way to do that.

4

web developers make accordion lists using JavaScript, JQuery and CSS3… however JQuery doesn’t work well on Ionic 3. Twitter Bootstrap accordion list is based on JQuery animation as well.
In my opinion, CSS3 accordion is the best way although it will take some time to learn how it works.

Or you can try to combine it with original Ionic components.

another solution is using Angular’s ngClass to dynamically add & remove CSS3 class on accordion list item. so once you click on accordion list item, angular will add a css3 class of display: inline or height: 350px to make the item expand its content.

1 Like
5

the problem of pure css accordion is the height… i need set a fixed height to animation, and its a problem for a big lists…

6

Hello,

maybe it helps, when you attach css property height with ngstyle and calculate variable for ngstyle whenever you want

Best regards, anna-liebt

7

check these tutorials:

or try to copy from this demo project made by other guy:

CSS3 accordion works fine with Angular 5’s [ngClass] & (click) with boolean … but if you have problems, you can follow the step by step tutorials on Josh Morony’s website.

8

All of them use itens with fixed height… its a great problem for me =(
i already try…
thanks

9

Then CSS3 accordion is your solution… you can set its height in anyway you want in CSS3.

Create CSS3 accordion list items with height of 0… and then you can use angular’s [ngClass] to dynamically change list item’s height into any way you want.

CSS3 animation transition can make this look more professional.

10

Wait, for dynamic height of items, you can use max-height CSS property.

For instance, if max-height of item is set to 500px, items will be set to whatever under 500px.

Try max-height instead of height to set accordion list items’ height dynamically according to data.

11

Work… but become a new problem with transitions… the transitions don’t work well… try to put a big content inside the accordion that you find =(

i think need use JS…

12

No, you can use [ngClass] to add transition to animation.

If you don’t know how to do that, please search ngClass of angular… it can dynamically add & remove CSS3.

So, accordion list item gets transition: 0.5s ease all; max-height: 0;'
and [ngClass] will add ‘max-height: 500px;’ on (click)

EDIT: actually ngClass should add CSS3 animation and keyframes along with max-height property…
animation-name: height-increase
animation-duration: 0.5s;
animation-iteration-count: 1;

@-webkit-keyframe height-increase {
0% { height: 0px; }
100% { max-height: 500px; }
}

Something like that…hope this helps.