JSFiddle - React, Tailwind, and code Playground

by Evghenusi

HTML

<ul id="accordion">
	<li id="c1"></li>
	<li id="c2"></li>
	<li id="c3"></li>
	<li id="c4"></li>
	<li id="c5"></li>
</ul>

CSS

#accordion{
	overflow:hidden;
	width:500px;
	border:1px solid #000;
	list-style:none;
	padding:0;
}
#accordion li{
	float:left;
	width:100px;
	height:100px;
}
#c1{background-color:#53B388}
#c2{background-color:#5A69A9}
#c3{background-color:#C26468}
#c4{background-color:#BF7CC7}
#c5{background-color:#f00}

JavaScript

Array.prototype.max = function(){
	return Math.max.apply(Math, this);
};
var acc = function(o){
	var wrap, blocks, count, timer, width = [];

	wrap = document.getElementById(o.id); //контейнер блоков
	
	wrap.onmouseover=function(e){
		clearInterval(timer); //останавливаем таймер (переменная общая для 2 тай...)
		
		e=e||window.event;
		var $this = e.target||e.srcElement; //получаем блок на который навели стрелку
		
		blocks = wrap.children; //потомки
		count = blocks.length; //кол-во потомков

		var ratio = []; //коэффициент (на сколько уменьшать/увел. каждый блок)
		o.min = (wrap.clientWidth - o.max) / (count - 1); // min ширина блока
		
																		// o.step - длина шага в px
		var S = Math.floor( (o.max - parseInt($this.style.width) || o.size ) / o.step); // подсчёт требуемого количества шагов
	
		timer = setInterval(function(){
			var flag = 0; //флаг для остановки таймера, если цель достигнута.
			
			for(var i=0; i<count; i++)
			{
				if( !width[i] ) width[i] = o.size; //заполнение глобального массива, если пуст
				
				if(blocks[i] == $this) //если это блок "Избранный"
				{
					if(width[i] < o.max)
					{
						if(!ratio[i])
						{
							ratio[i] = (o.max - width[i]) / S; //высчитываем и заполняем массив коэффициентов
						}
						
						width[i] += ratio[i]; // увеличение блока
					}
					else
						flag++;
				}
				else
				{
					if(width[i] > o.min)
					{
						if(!ratio[i])
						{
							ratio[i] = (o.min - width[i]) / S; //высчитываем и заполняем массив коэффициентов
						}
						
						width[i] += ratio[i]; // уменьшение (хоть и плюс)
					}
					else
						flag++;
				}
				
				width[i] = Math.round(width[i]);
				blocks[i].style.width = width[i] + 'px';
				
			}
			if(flag >= count) clearInterval(timer);
			
		}, o.sec);
	}

	wrap.onmouseout = function(){
		clearInterval(timer);
		
		var ratio = [], S = width.max(); //ширина самого широкого блока
		if(S == o.size) return; //если равна ширине в покое, значит аривидерчи
		S =...