Change tabs on hover (Nestable Tabs)

1

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
2

Yes I would love this as well.

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

1 Like
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é

4 Likes
4

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
5

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.

6

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
7

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

8

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>
9

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
10

This is great. Thanks for this and the video. Do any of you guys know how to make them work with keyboard navigation for accesibility? I need to put these inside a mega menu. Even outside a mega menu, the tabs we built here should be accisbile with keyboard navigation but focus-visible isn’t being applied (tabs don’t navigate with tab)