Change tabs on hover (Nestable Tabs)

3

Hey guys,

personally I do not like the UX of opening a tab on hover but since there might be use cases I created a very basic script which provides this functionality:

<script>

/*
 * Replace this with your tab element's ID (or a class
 * if you want to use it for multiple tab elements
 */
const tabs = document.querySelector('#brxe-grnbgm')

const tabTitles = tabs.querySelectorAll('.tab-title')
const tabPanes = tabs.querySelectorAll('.tab-pane')
tabTitles.forEach((tabTitle, i) => {
  tabTitle.addEventListener('mouseenter', () => {
    tabTitles.forEach(tempTabTitle => {
      tempTabTitle.classList.remove('brx-open')
    })
    tabPanes.forEach(tempTabPane => {
      tempTabPane.classList.remove('brx-open')
    })
    tabTitle.classList.add('brx-open')
    tabPanes[i].classList.add('brx-open')
  })
})

</script>

Let me know if that helps.

Best,

André

5 Likes