How to create smoothly expand/collapse panel using pure CSS?

I create expand/collapse panel that work fine. I use angular for click event handle and pure CSS for styling.

There is a LIVE DEMO.

However this panel doesnt open/close smoothly. Please help my to add smothness. I found live example that use JQuerry. This example will help you understand what the result should look like.

But remember I want to use pure CSS, not a JQuery

My code:

angular:

@Component({
selector: 'app-root',
imports: [CommonModule],
template: `
<div (click)="isExpanded.set(!isExpanded())" class="header">
header
</div>

<div class="content" [ngClass]="{'is-expanded': isExpanded()}">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
`,
})
export class App {
isExpanded: WritableSignal<boolean> = signal(false);
}


CSS:

.content {
transition: height 0.5s;
height: 0;
overflow: hidden;
}

.content.is-expanded {
height: 100%;
transition: height 0.5ss;
}

Continue reading...