Keep Tabs and Pills active on refresh

[semaf]

Just want to share this feature to get tabs or pills active after refresh the page. Maybe you will build-in it.

const pillsTab = document.querySelector('#pills-tab');
const pills = pillsTab.querySelectorAll('a[data-bs-toggle="pill"]');

pills.forEach(pill => {
  pill.addEventListener('shown.bs.tab', (event) => {
    const { target } = event;
    const { id: targetId } = target;
    
    savePillId(targetId);
  });
});

const savePillId = (selector) => {
  localStorage.setItem('activePillId', selector);
};

const getPillId = () => {
  const activePillId = localStorage.getItem('activePillId');
  
  // if local storage item is null, show default tab
  if (!activePillId) return;
  
  // call 'show' function
  const someTabTriggerEl = document.querySelector(`#${activePillId}`)
  const tab = new bootstrap.Tab(someTabTriggerEl);

  tab.show();
};

// get pill id on load
getPillId();

Source: https://codepen.io/yaroslav-trach/pen/wvyrJJx?editors=1111