Collapse/Expand animation for panel to edit - html

Question

I have a panel that shows a task. The tasks are being displayed by iterating through an array.
When a task is clicked, I want the panel to expand and show a form which allows the user to edit the clicked task.
How can I realize this behavior?
The panel has already an animation allocated to itself, namely a delete animation. How can I additionally add an expand/collapse animation - and how do I make sure that the edit field is allocated to the task clicked.
<div class="row content-cont" [#EnterLeave]="animation">
<div class="col-11 d-flex todo shadow-sm">
<div class="row w-100 align-self-center">
<div class="col-2 px-0 d-flex justify-content-center">
<button type="button" class="btn btn-default btn-circle shadow-sm exceeded align-self-center" [ngClass]="'state' + task.state"
(click)="updateState(task.id)"></button>
</div>
<div class="col-6 px-0">
<div class="row">
<div class="col-6 d-flex">
<h1 class="align-self-center">{{task.title}}</h1>
</div>
<div class="col-6 d-flex">
<p class="desc align-self-center">{{task.describtion}}</p>
</div>
</div>
<div class="row">
<div class="col-4">
<p *ngIf="task.date !== null">{{task.date | date: 'dd.MM.yyyy'}}
</p>
</div>
</div>
</div>
<div class="col-4 d-flex justify-content-end">
<img *ngIf="task.state !== '2'" class="align-self-center trash-button" src="/assets/icons/trash-2-colorized.svg" alt="Trash" (click)="deleteTask(task.id)">
<img *ngIf="task.state === '2'" class="align-self-center" src="/assets/icons/trash-2.svg" alt="Trash">
</div>
<h1 class="priority position-absolute">{{task.priority}}</h1>
</div>
</div>
</div>