Change tabs on hover (Nestable Tabs)

It would be great if you could add the ability to open tabs with hover to the Nestable Tabs widget.
In most situations this can be very useful.

3 Likes

Yes I would love this as well.

This can be very useful if we use it in a mega menu.

1 Like

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é

4 Likes

Hi @aslotta,

I agree with you too. This is not a universal feature. But it will definitely be needed in some situations and it will be a good thing if it is embedded in the nestable tabs widget.
About the code you posted, it works fine. Thank you for your time.

cheers🥂

1 Like

Thanks @aslotta for the snippet. Agree it would be great to add it to the nestable tabs, as there are times where it would by useful.

Hey guys,

if you feel there is a need for this to be included natively feel free to create an idea.

Best,

André

1 Like

Pls is there a way you can break this down for me as a newbie. Do not know how to go about it.

Pls is there a way you can break this down for me as a newbie. Do not know how to go about it.

  1. put this code in settings > custom code > Body (footer) scripts.
  2. Replace nestable tabs element ID with #brxe-vkvzka ID in the first line of code.
<script>

const tabs = document.querySelector('#brxe-vkvzka')

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>

A big thank you for the help and clarity. I went further to tweak the code and it worked perfectly for me.

<script>
  const tabs = document.querySelector('#brxe-swlnta');
  const tabTitles = tabs.querySelectorAll('.tab-title');
  const tabPanes = document.querySelector('#brxe-clbhbx').querySelectorAll('.tab-pane');

  tabTitles.forEach((tabTitle, i) => {
    tabTitle.addEventListener('mouseenter', () => {
      // Remove 'brx-open' class from all titles and panes
      tabTitles.forEach(tempTabTitle => tempTabTitle.classList.remove('brx-open'));
      tabPanes.forEach(tempTabPane => tempTabPane.classList.remove('brx-open'));

      // Add 'brx-open' class to the hovered title and corresponding pane
      tabTitle.classList.add('brx-open');
      tabPanes[i].classList.add('brx-open');
    });
  });
</script>

The 2 element ID’s need to be replaced. Did a video on it to further help people - https://youtu.be/Ap2g7daaqGU

1 Like