Accordion component not found in ionic

Ionic Framework ionic-v3
1

Hey ionic 2 team i need accordian component , can you please make it and add on doc.

1 Like
2

Well…since you asked so nicely …

This is just a rough demo and meant to illustrate a quick proof of concept.

7 Likes
3

Thanks so much, it’s really help full to me but i have one issued on it.
I need something like

  • if anyone clicking on list it will scroll to top and other will be collapse and change icon when toggle list
4

I edited the previous Plnkr to toggle only clicked item, check it out.

Btw: thx @mhartington for this nice codepen. Wasn’t interested that much in the Animation framework of angular2 but now I am thanks to your simple codepen :slight_smile:

5

it is a good illustration but i ve heard that animating height property is not very peformance friendly way to do things. should be used with caution.

1 Like
6

@mhartington hi sir , can you help me out… I am trying to do something similar but im failing in the animation…
I have list of title which consists of Paragraph

(e.g.)
.html:

 <ion-item-group>
   <ion-item-divider color="light" (click)="toggleGroup()">
      About {{details.company.data.company_name_en}}
    <ion-icon item-left name="add" *ngIf="!active"></ion-icon>
    <ion-icon item-left name="remove" *ngIf="active"></ion-icon>
  </ion-item-divider>
  
  <ion-item [@expand]="active">
   <p dir="auto" >
    {{details.company_profile}}
   </p>
  </ion-item>

<ion-item-divider color="light" (click)="toggleGroup1()">
  Job Summary
  <ion-icon item-left name="add" *ngIf="!active"></ion-icon>
  <ion-icon item-left name="remove" *ngIf="active"></ion-icon>
</ion-item-divider>
  
<ion-item [@expand]="active">
  <p dir="auto">
  {{details.job_summary}}
</p>
</ion-item>

since i am not using *ngFor i have to have a different toggleGroup function for each…however thats not the problem…

I have a paragraph the should expand… The problem is in height style… I tried auto but seem the animation stopped to work… and if I specify a height then that won’t work as well since the paragraphs have a dynamic length depnding on how big or small… how to address this issue , thanx

8

nvm , i fixed the problem like this… but I am open to suggestion to improve upon the code :slight_smile:

.html :

  <ion-item-group *ngFor="let detail of details">
    <ion-item-divider color="light" (click)="toggleGroup1()">
       About {{detail.company.data.company_name_en}}
     <ion-icon item-left name="add" *ngIf="!activeGroup1"></ion-icon>
     <ion-icon item-left name="remove" *ngIf="activeGroup1"></ion-icon>
    </ion-item-divider>
  
  <ion-item [@expand]="activeGroup1">
    <p dir="auto" >
    {{detail.company_profile}}
    </p>
  </ion-item>

 <ion-item-divider color="light" (click)="toggleGroup2()">
  Job Summary
  <ion-icon item-left name="add" *ngIf="!activeGroup2"></ion-icon>
  <ion-icon item-left name="remove" *ngIf="activeGroup2"></ion-icon>
</ion-item-divider>
  
<ion-item [@expand]="activeGroup2">
  <p dir="auto">
  {{detail.job_summary}}
</p>
 </ion-item>
</ion-item-group>

.ts :

 animations: [
  trigger('expand', [
    state('true', style({ height: '*'})),
    state('false', style({ height: '0'})),
    transition('void => *', animate('0s')),
    transition('* <=> *', animate('250ms ease-in-out'))
   ])
  ]

 activeGroup1= false;
 activeGroup2= false;

 toggleGroup1(){
   this.activeGroup1 = !this.activeGroup1;
   this.activeGroup2 = false;   
  }
 toggleGroup2(){
   this.activeGroup2 = !this.activeGroup2;
   this.activeGroup1 = false; 
  }
9

@mhartington, Hello sir, I am new to Ionic2 and been working on a small project which requires an accordion, I did make use of the same code that you have suggested here, now when I run the ionic serve command it is outputting an animation error on the browser.

Error Details;
[@expand] found synthetic error include “BrowserAnimationsModule” or “NoopAnimationsModule” in your project.

I did try to include these but no luck it is not working. Can you please help on this?

Thanks in advance!

10

hi, you’r using ionic 3… there are some changes, especially in the angular… let me know if you haven’t found out a solution yet

11

“it is not working” conveys zero useful information. Post exactly what you did to your app module.

1 Like
12

@mhartington @rapropos

hi, the animation is no longer working in ionic 3… I have added and imported import { BrowserModule } from "@angular/platform-browser";

as well import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

it does not throw any error , it just doesn’t animate and the item is not hidden at all (meaning height does not go to 0`)