I am using tabs. On selection of tab, active tab position becomes middle tab. I want change order of all tabs when selecting middle tab from any order let's suppose the order was
1 2 3 4 5
the new order will be, on selection of 4th tab,
2 3 4 5 1
similar cycle will be applied on selection of any tab my current code is
const tablist = document.querySelector(".tablist"),
tabs = Array.from( tablist.querySelectorAll(".tabs")).sort((a,b) => getComputedStyle(a).order - getComputedStyle(b).order); //get proper initial order
tablist.addEventListener("click", e =>
{
if (!e.target.matches(".tabs"))
return;
for(let i = 0, order = 0, half = Math.round(tabs.length / 2); i < tabs.length; i++)
{
tabs[i].classList.toggle("tab-active", tabs[i] === e.target);
tabs[i].style.order = (tabs[i] === e.target ? half : ++order == half ? ++order : order);
}
});
tablist.querySelector(".tab-active")?.click(); //initialize order.tablist { display: grid; }
.tablist li.tab-active { font-weight: bold; }
.tabs { cursor: pointer; user-select: none; }<ul class="tablist">
<li class="tabs">Marketing</li>
<li class="tabs">Manufacturing</li>
<li class="tabs tab-active" >Municipalities</li>
<li class="tabs">Retail</li>
<li class="tabs">Healthcare</li>
</ul>I am only suppose to use javascript no jquery or css for handling order.