水平手风琴的幻灯片动画

Question

[我要做的是，当我单击其中一个面板以显示内部内容时，我想将所有其他面板缓慢地滑动（一些动画）并向右滑动，使它们变小，然后再次单击活动标签，它们从右向左滑动并具有初始位置。有什么帮助吗？

我发现一个网站与我要实现的目标有着密切的联系。 https://www.berkeleygroup.co.uk/about-us/sustainability

关于我应如何继续的任何想法？

   const PANEL_ITEM = document.querySelectorAll(".panel-item");
    const PANEL_CONTENT = document.querySelectorAll(".panel-content");
    const WRAPPER = document.querySelector('.wrapper');

    for (var i = 0; i < PANEL_ITEM.length; i++) {
      PANEL_ITEM[i].onclick = function () {
        var setClasses = !this.classList.contains('active');
        setClass(PANEL_ITEM, 'active', 'remove');
        setClass(PANEL_CONTENT, 'visible', 'remove');

        if (setClasses) {
          this.classList.toggle("active");
          this.nextElementSibling.classList.toggle("visible");
        }
      }
    }

    function setClass(els, className, fnName) {
      for (var i = 0; i < els.length; i++) {
        els[i].classList[fnName](className);
      }
    }

.section-panel {
  display: flex;
  border-bottom: 1px solid black;
}

.container {
  width: 1185px;
  margin: 0 auto;
}

.panel-item {
  height: 500px;
  width: 40px;
  line-height: 50px;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border: 1px solid black;
}

.panel-content {
  display: none;
  width: 0;
}

.panel-item.active {
  width: 295px !important;
}

.visible.panel-content {
  display: block;
  width: 95vh;
}

.wrapper {
  display: flex;
  justify-content: center;
}

  <div class="container">
  <div class="wrapper">
    <div class="wrapper-item">
      <div class="section-panel">
        <div class="panel-item">
        </div>
        <div class="panel-content">
          blahblah
        </div>
      </div>
    </div>
  
    <div class="wrapper-item">
      <div class="section-panel">
        <div class="panel-item">
          Thing 2
        </div>
        <div class="panel-content">
          blahblah
        </div>
      </div>
    </div>
    <div class="wrapper-item">
      <div class="section-panel">
        <div class="panel-item">
          Thing 3
        </div>
        <div class="panel-content">
          blahblah
        </div>
      </div>
    </div>
    <div class="wrapper-item">
      <div class="section-panel">
        <div class="panel-item">
          Thing 4
        </div>
        <div class="panel-content">
          blahblah
        </div>
      </div>
    </div>
    <div class="wrapper-item">
      <div class="section-panel">
        <div class="panel-item">
          Thing 5
        </div>
        <div class="panel-content">
          blahblah
        </div>
      </div>
    </div>
  
  </div>
  </div>

我发现一个网站与我要实现的目标有着密切的联系。 https://www.berkeleygroup.co.uk/about-us/sustainability

关于我应如何继续的任何想法？

Answer 1

更改这些CSS像这样：

.panel-item.active {
  width: 35px !important;
  transition: 0.5s;
}

.visible.panel-content{
      display: block;
      width: 95vh;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
}