Switching Tabs on Hover in Bricks

This Pro tutorial shows how to make the tabs of Tabs (Nestable) elements active on hover in Bricks.

Step 1

Add one or more Tabs (Nestable) elements.

Step 2

Edit your Bricks Page/Template and paste this in the Bricks editor at Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts:

<script>
document.addEventListener("DOMContentLoaded", function () {
  // store a list of all .brxe-tabs-nested elements on the page
  const tabsNested = document.querySelectorAll(".brxe-tabs-nested")

  // loop through each .brxe-tabs-nested element
  for (let i = 0; i < tabsNested.length; i++) {
    // attach a mouseover event listener to each .brxe-tabs-nested element
    tabsNested[i].addEventListener("mouseover", function (event) {
      // check if the mouseover event target is a tab title
      if (event.target.classList.contains("tab-title")) {
        // store a list of all tab titles and tab panes inside the current .brxe-tabs-nested element
        const tabTitles = event.currentTarget.querySelectorAll(".tab-title")
        const tabPanes = event.currentTarget.querySelectorAll(".tab-pane")

        // remove the "brx-open" class from all tab titles and tab panes inside the current .brxe-tabs-nested element
        for (let j = 0; j < tabTitles.length; j++) {
          tabTitles[j].classList.remove("brx-open")
        }

        // add the "brx-open" class to the tab title that was moused over
        event.target.classList.add("brx-open")

        // store the index of the tab title that was moused over
        const tabIndex = [].indexOf.call(tabTitles, event.target)
        // a way of finding the index of event.target (the current tab title) in the tabTitles array-like object.

        // The `.indexOf` method is an array method that returns the first index at which a given element can be found in the array, or `-1` if it is not present. In this case, we want to use the `.indexOf` method on the `tabTitles` object, which is not an array, but an array-like object (i.e., it has a length property and properties that can be accessed using indices, like an array).

        // To use the `.indexOf` method on an array-like object, we can use the `call` method, which allows us to set the `this` value of a function to an object of our choosing. In this case, we use the `call` method to set the `this` value of the `.indexOf` method to the `tabTitles` object, so that we can use `.indexOf` on `tabTitles` like this:
        // [].indexOf.call(tabTitles, event.target)

        // The result of this expression is the index of `event.target` in the `tabTitles` array-like object, which is then assigned to the `tabIndex` constant. This `tabIndex` can then be used to access the corresponding tab pane from the `tabPanes` array-like object, so that we can open the correct tab content for the hovered tab title.

        // remove the "brx-open" class from all tab panes inside the current .brxe-tabs-nested element
        for (let k = 0; k < tabPanes.length; k++) {
          tabPanes[k].classList.remove("brx-open")
        }

        // add the "brx-open" class to the tab pane that corresponds to the tab title that was moused over
        tabPanes[tabIndex].classList.add("brx-open")
      }
    })
  }
})
</script>