Accordion menù with smooth animation

Ionic Framework ionic-v3
1

I’ve created an accordion side menù using this simple code:

.html

 <ion-content>
      <ion-item-group *ngFor="let tax of Wiki; let i=index"  (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" >
        <ion-item-divider > {{tax[0]}}</ion-item-divider>
        <div *ngIf="isGroupShown(i)">
          <button text-wrap menuClose ion-item icon-left *ngFor="let p of tax[1]" (click)="goToPage(p.title.rendered, p.acf.nome, p.id, p.slug)">
            {{p.acf.nome}} 
          </button>
        </div>
      
      </ion-item-group>
  </ion-content>

.ts

    toggleGroup(group) {
        if (this.isGroupShown(group)) {
        
            this.shownGroup = null;
            console.log('shownGroup: ' + this.shownGroup);
        } else {
            this.shownGroup = group;
        }
    };

    isGroupShown(group) {
        return this.shownGroup === group;
    };

There is a way to add a smooth animation when I click ion-item-group and I open the accordion?
I have no css applied to this code.

I’ve searched for a lot of accordion tutorial but none of them have a smooth animation applied.

Thank you.

2

Hello,

maybe one of them https://freefrontend.com/css-accordions/ helps.

Maybe instead of implementing itself you can use one of other ui framework.

Best regards, anna-liebt

3

Thank you but I’m seaching that fits well with ionic…not a generic accordion.

4

Check this out:

https://material.angular.io/components/expansion/overview
https://material.angular.io/components/sidenav/overview

It’s so good and useful. I use them in my own applications :slight_smile:

Hope that’s what you’re looking for, otherwise check the documentation for the rest of the components angular provides.

5

hello,

Thank you but I’m seaching that fits well with ionic…not a generic accordion.

Sorry for my english, it is for me not clear what this really mean, because you can use ion elements for your accordion, but animation is done by css.

Additional, maybe I am wrong.
If I look to your html, then I see that you use ngif for rendering content into div. If ngif is false then there is nothing put into dom and can not be animated.

Best regards, anna-liebt

6

The animation for Angulars accordion and sidenav are built in the components :smiley: you don’t need to add any CSS yourself, just press a button and it works like a charm.

7

Yes ,
but as I understood, she would not use material accordion and sidenav is not an accordion.

She would use ion-whatever and animate it, that it acts like an accordion. She can do that with css like css accordions do and alsi she must take care that there is something she can animate.

Maybe I understood wrong, in case sorry for that text.

Best regards, anna-liebt

1 Like