如何在HTML

Question

我想实现一个垫板展开面板，该面板可以打开所有视图中的元素。像这样：

您能否请我帮我理解如何实现它。我认为这是CSS格式，但老实说我不知道​​该怎么做。

在下面检查我的html代码：谢谢您的帮助

<div class="page-body navbar-page">

  <div class="page-body navbar-page">
     <mat-accordion>
       <mat-expansion-panel class="position">
         <mat-expansion-panel-header>
            <mat-panel-description>
              <input type="text (keyup)='filterDevicesByProductOrIternalName($event)' class="form-control py-2 search-query border-right-0 border" placeholder="Search Device (by Product Name or Internal Name)" aria-label="Search Device" aria-describedby="basic-addon2">
          </mat-panel-description>
       </mat-expansion-panel-header>

      <mat-form-field>
        <input type="text" placeholder="Select Owner" aria-label="Number" matInput [formControl]="ownerControl"
        [matAutocomplete]="autoOwner">
       <mat-autocomplete #autoOwner="matAutocomplete">
         <mat-option *ngFor="let owner of ownerOptions | async" [value]="owner">
           {{owner}}
        </mat-option>
     </mat-autocomplete>
   </mat-form-field>

   <mat-form-field>
      <input type="text" placeholder="Select Device Type" aria-label="Number" matInput [formControl]="deviceTypeControl"
        [matAutocomplete]="autoDeviceType">
      <mat-autocomplete #autoDeviceType="matAutocomplete">
        <mat-option *ngFor="let deviceType of deviceTypeOptions | async" [value]="deviceType">
         {{deviceType}}
         </mat-option>
       </mat-autocomplete>
     </mat-form-field>

  </mat-expansion-panel>
</mat-accordion>
</div>

 <br />
 <br />

   <!-- chart map from tardis devices -->
   <div class="row">
     <div class="col-md-12">
        ......
     </div>
   </div>

   <!-- tardis devices data table -->
   <div class="row">
     <div class="col-sm-12">
       .......
     </div>
   </div> 
</div>