Assistance in animating div

Hey guys,

I am pretty new Ionic and am mostly a backend dev so this is like a whole new world to me. I absolutely love Ionic, the whole experience is great, it allowed me to prototype my app quite quickly.

Anyway - on to the question. I followed a tutorial on how to create a accordion menu, which looks quite nice, but I would like to animate the div that gets expanded. I have tried adding transition: all 1s ease; on the div itself but that didn’t do anything, I tried adding it onto the ion-item with no luck either. Can someone with some more CSS knowledge maybe help me out?

Here is the code in question:

<ion-list *ngFor="let item of information; let i = index;" class="accordian-list" lines="none" detail="false"

    <ion-item tappable"section{{i}}" (click)="toggleSection(i)" class="accordian-section ion-activatable">
      <fa-icon [icon]="['fas', 'plus']" slot="start" *ngIf="!"></fa-icon>
      <fa-icon [icon]="['fas', 'minus']" slot="start" *ngIf=""></fa-icon>
        {{ }}

    <div *ngIf="item.children &&">
      <ion-list *ngFor="let child of item.children; let j = index;" lines="none" class="accordian-child-list">
        <app-information [information]="child" *ngIf="!child.children" class="test"></app-information>


Have a look at this youtube video:

Will do - thank you :slight_smile: