Assistance in animating div

Ionic Framework ionic-v3
1

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"
    no-padding>

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

    <div *ngIf="item.children && item.open">
      <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>
      </ion-list>
    </div>

  </ion-list>
2

Have a look at this youtube video:

3

Will do - thank you :slight_smile: