Solved: How to Switching Tabs (Nestable Tabs) on Hover in Bricks Builder

How To
1

Copy the script into your page builder custom code body (footer). Replace #brxe-swlnta with the tab menu element ID and #brxe-clbhbx with the tab content element ID. That should do the trick.

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

Video guide: https://www.youtube.com/watch?v=Ap2g7daaqGU

1 Like
2

Modification: In case if need to do same for multiple tabs:

Here is the updated code:

<script>
  // Define an array of objects, each object contains the ID for the tab titles and the corresponding tab panes
  const tabsConfig = [
    { titles: '#brxe-trwiqw', panes: '#brxe-cqnpgw' },
    { titles: '#brxe-xbvvmo', panes: '#brxe-kcngnt' },
  ];

  // Iterate over each config object
  tabsConfig.forEach(config => {
    const tabs = document.querySelector(config.titles);
    const tabTitles = tabs.querySelectorAll('.tab-title');
    // Adjusted to select the correct pane container based on the current config
    const tabPanes = document.querySelector(config.panes).querySelectorAll('.tab-pane');

    tabTitles.forEach((tabTitle, i) => {
      tabTitle.addEventListener('mouseenter', () => {
        // Remove 'brx-open' class from all titles and panes within the current tab set
        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>