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

#javascript #html #css #jquery #bootstrap

        
             
                
                    
                        
                            Closed. This question needs to be more focused. It is
not currently accepting answers.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Want to improve this question? Update the question so
it focuses on one problem only by editing this post.
                        
                        Closed 8 месяцев назад.
                                                                                
           
                
        
Кто знает как приблизительно сделать такой коллапс? Верстаю на bootstrap.

    

Ответы

Ответ 1

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;
}

  

    

      1
    
  
  

    

      2
    
  
  

    

      3
    
  
  

    

      4
    
  
  

    

      5