Работа на панели Flexbox CSS и JavaScript

Question

Действительно застрял на последнем кусочке кода в JavaScript.В основном у меня есть три панели во Flexbox.Скажем, если щелкнуть первую панель, она широко откроется, и появится изображение и текст, одинаковые для второй и третьей панели.Однако, если я открою первую и затем нажму на вторую панель, первая все равно останется открытой, что означает, что изображение и текст выглядят тугими и даже более плотными, когда третья панель открыта.Как мне сообщить браузеру, что если я щелкну первую панель, чтобы открыть, а затем вторую, а затем закрою первую панель, чтобы появилось место для второй панели?

    const panels = document.querySelectorAll('.panel')

     function toggleOpen() {
       this.classList.toggle('open')
     }

     function toggleActive(e) {
       if (e.propertyName.includes('flex')) {
       this.classList.toggle('open-active')
       }
     }

     panels.forEach(panel => panel.addEventListener('click', toggleOpen))
     panels.forEach(panel => panel.addEventListener('transitionend', toggleActive))

     panels.forEach(panel => panel.addEventListener('click', toggleOpen));
     panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

     // when I have one panel open and I click another panel the one that was open first closes

CSS

         *, *:before, *:after {
  box-sizing: inherit;
}

img {
    width: 40%;
    height: 20%;
}

.panels {
  min-height:100vh;
  overflow: hidden;
  display: flex;    
}

.panel {
  box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
  color:white;
  text-align: center;
  align-items:center;
  /* Safari transitionend event.propertyName === flex */
  /* Chrome + FF transitionend event.propertyName === flex-grow */
  transition:
    font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
    flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
    background 0.2s;
  font-size: 20px;
  flex: 1;
  justify-content: center;
  display: flex;
  flex-direction: column;
}


/* Flex Children */

.panel > * {
  margin:0;
  transition:transform 0.5s;
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel > *:first-child {transform: translateY(-100%);}
.panel.open-active > *:first-child {transform: translateY(0);}
.panel > *:last-child {transform: translateY(100%);}  
.panel.open-active > *:last-child {transform: translateY(-20%);}  

.panel p {
  color: black;
}
.panel p:nth-child(2) {
  font-size: 1em;
}

.panel.open {
  flex: 5;
  font-size:30px;
}

Answer 1

Внутри функции открывания переключателя вы можете удалить класс open со всех панелей перед добавлением класса open на панель, на которую нажали.

 function toggleOpen() {
      panels.forEach(panel => panel.classList.remove('open'));
      this.classList.toggle('open');
    }

Вы можете посмотреть полный код здесь. https://codepen.io/vibhanshu/pen/KbQvYX

Answer 2

Попробуйте

function toggleOpen() {
    panels.forEach(function(panel){
    if(panel.classList.contains('open')
       panel.classList.remove('open');
    });
    this.classList.toggle('open');
}