Как сделать такой коллапс [закрыт]

const accordeonItems = document.querySelectorAll('.accordeon-item'); 
let timer; 
 
accordeonItems.forEach((item, i) => { 
  if(i > 0){ 
    //"прижимаем" вправо все элементы, начиная со второго 
    item.style.width = `${(accordeonItems.length - i) * 60}px`; 
  } 
   
  item.addEventListener('click', (evt) => { 
    // при клике на элемемент опять перебираем все 
    accordeonItems.forEach((item, j) => { 
      if(j < i){ 
        // если индекс элемета меньше индекса того,  
        // по которому кликнули, то "отправляем" влево 
        item.style.width = `calc(100% - ${j*60}px)`; 
      }else if(j > i){ 
        // если нет, то вправо 
        item.style.width = `${(accordeonItems.length - j) * 60}px`; 
      }else if(j == i){ 
        // если индексы равны, то влево с анимацией 
        item.style.width = `calc(100% - ${j*60-10}px)`; 
        clearTimeout(timer); 
        timer = setTimeout(() => { 
          item.style.width = `calc(100% - ${j*60}px)`; 
        }, 200); 
      } 
       
      // убираем класс active у всех 
      item.classList.remove('active'); 
       
      // и добавляем тому, по которму кликнули 
      evt.currentTarget.classList.add('active');         
    }); 
  }); 
   
});

.accordeon{ 
  position: relative; 
  width: 100%; 
  height: 60px; 
} 
 
.accordeon-item{ 
  position: absolute; 
  top: 0; 
  right: 0; 
  height: 100%; 
  width: 100%; 
  background: #6ad9ff; 
  border: 3px solid #fff; 
  border-radius: 30px; 
  padding: 5px; 
  box-sizing: border-box; 
  transition: width 200ms; 
  cursor: pointer; 
} 
 
.accordeon-item.active{ 
  background: #0093e9; 
} 
 
.accordeon-item:first-child{ 
  background: #fec202; 
  border: 3px solid #fec202; 
} 
 
.accordeon-item-title { 
    float: left; 
    background: #7a00ff; 
    height: 44px; 
    width: 44px; 
    border-radius: 50%; 
    text-align: center; 
    line-height: 44px; 
    color: #fff; 
}

<div class = "accordeon"> 
  <div class = "accordeon-item"> 
    <div class = "accordeon-item-title"> 
      1 
    </div> 
  </div> 
  <div class = "accordeon-item"> 
    <div class = "accordeon-item-title"> 
      2 
    </div> 
  </div> 
  <div class = "accordeon-item"> 
    <div class = "accordeon-item-title"> 
      3 
    </div> 
  </div> 
  <div class = "accordeon-item"> 
    <div class = "accordeon-item-title"> 
      4 
    </div> 
  </div> 
  <div class = "accordeon-item"> 
    <div class = "accordeon-item-title"> 
      5 
    </div> 
  </div> 
</div>