I am working on creating a toggle feature for a div that can expand and collapse upon clicking. While I have successfully implemented the expand transition using max-height to accommodate varying content sizes, I am facing difficulties with transitioning the collapse effect. Below is the code snippet for reference:
File: div.component.html
<div
[ngClass]="{'expand': divClass, 'collapse': !divClass}"
(click)="divClass = !divClass"
class="custom-div">
</div>
File: div.component.css
.custom-div {
width: 400px;
height: 100px;
max-height: 100px;
transition: max-height 1s;
}
.expand {
background-color: red;
height: 500px;
max-height: 500px;
}
.collapse {
background-color: blue;
max-height: 100px;
height: 100px;
transition: max-height 1s;
}