Accordion functionality missing in Ionic

Ionic Framework ionic-v3
1

Hello Everybody

The accordion component missing in Ionic2 ?

2

It isn’t “missing”, as far as I know there was no accordion component in Ionic 1 either, however it’s fairly simple to make one yourself, here are some links:

http://codepen.io/ionic/pen/uJkCz
Accordion List
http://loring-dodge.azurewebsites.net/ionic-item-expand

Or maybe the Ionic Market has something (haven’t checked).

1 Like
3

Add mine too please:) http://codepen.io/badpenguin/pen/MyJEvy

1 Like
4

Take a look at https://github.com/mahmoudissmail/ionic2Accordion

2 Likes
5

Hi @big_bill91
You can create accordian in ionic 2 by creating a directive and use that directive in which div you want to apply that

Ts file

@Directive({ selector: ‘[collapse]’ })
export class Collapse {

@HostBinding(‘class.collapsing’)
public isCollapsing: boolean

// style
@HostBinding(‘style.height’)
public height: string;

@Input()
public set collapse(value: boolean) {
if (value !== undefined) {
if (value) {
this.hide();
} else {
this.show();
}
}
}
constructor(public el: ElementRef) {

this.measureHeight();

}
measureHeight() {
let elem = this.el.nativeElement;
//lets be sure the element has display:block style
elem.className = elem.className.replace(‘collapse’, ‘’);
//this.h = elem.scrollHeight;

}
hide() {
this.height = ‘auto’;
setTimeout(() => {
this.height = ‘0px’;
this.isCollapsing = true;//apply ‘collapsing’ class
}, 1);
}
show() {
this.height = '0px’
setTimeout(() => {
this.height = ‘auto’;
this.isCollapsing = true;//apply ‘collapsing’ class
}, 1);
}

Use [collapse] directive in your div like " [collapse]=“booleanValueBind”"

6

I write this using latest Ionic 2 Final https://www.djamware.com/post/5892739480aca7411808fa9c/how-to-create-ionic-2-accordion-list it was very simple thing

7

this is great but if you want to ahve a multi lvl accordion lets say 4 lvlvs down how do you change the code?

8

Does anyone has an animated accordion? :thinking: