使用css实现展开收起效果

<button (click)="toggleExpand()">Toggle Expand</button>
<div class="content" [ngClass]="{'expanded': isExpanded, 'collapsed': !isExpanded}">
  <!-- Your content goes here -->
</div>
.content {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.expanded {
  max-height: 200px; /* Adjust the height as per your content */
}

.collapsed {
  max-height: 0;
}
export class YourComponent {

  isExpanded = false;

  toggleExpand() {
    this.isExpanded = !this.isExpanded;
  }
}

主要是使用max-height来实现的，比较巧妙，遂记录于此