Javascript 如何折叠面板？

我在这方面做了很多研究，但没有找到一个好的解决方案。基本上，我的应用程序中有一个面板

（面板2）

，单击按钮时，我想将其折叠到左侧，如果再次单击按钮，则将其展开到右侧

这是我的工作代码：

---

小组2

在面板2元素上使用

fxHide

和

[fxShow]=“展开”

<div class="container">

  <div class="content" fxLayout="row" fxFlexFill>

      <div class="sec1" fxFlex="20%" fxHide [fxShow]="expand">
          SIDEBAR
      </div>
      <div class="sec2" fxFlex="100%">
          BODY
      </div>
  </div>

  <button (click)="expand = !expand">Toggle Sidebar</button>

</div>

边栏
身体
切换边栏

这是一张工作票

---

更新：这里是一个

当点击按钮时，您是否尝试过改变Flex属性？弹性：10 0 10；只要有一个a类，其中表示扩展的%增长和%收缩，而B类中间div收缩。单击“更改类名”。可能还需要在收缩的DIV上更改zIndex之类的内容来更改DIV内容，这样看起来就不那么傻了。。。我的2美分。

<div class="container">

  <div class="content" fxLayout="row" fxFlexFill>

      <div class="sec1" fxFlex="20%" fxHide [fxShow]="expand">
          SIDEBAR
      </div>
      <div class="sec2" fxFlex="100%">
          BODY
      </div>
  </div>

  <button (click)="expand = !expand">Toggle Sidebar</button>

</div>