How to Link to a Specific Tab in Bricks

This Pro tutorial provides the JavaScript code that will automatically switch to the tab when using Nestable Tabs elements based on the “tab” URL parameter in Bricks.

Let’s say there is a Tabs (Nestable) element on “Sample Page” whose frontend URL is:

https://example.com/sample-page

By default, the first tab will be the open/active one.

Now you want the 2nd tab to be open on page load. Just append that tab’s slug as the value of a tab query string.

https://example.com/sample-page?tab=title-2

With the JavaScript in place, this will be the result:

The user can click on any other tabs to switch to them as usual.

Step 1

Edit your Page/Template with Bricks.

At Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts paste:

<script>
document.addEventListener("DOMContentLoaded", (event) => {
  // https://example.com/sample-page?tab=title-1
  // get the value of "tab" URL parameter
  const urlParams = new URLSearchParams(window.location.search)
  const tabParam = urlParams.get("tab")

  // if the URL parameter is not set, abort.
  if (!tabParam) {
    return
  }

  // 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++) {
    // Get the text content of child element of div.tab-title and set its slug as a data attribute on the div.tab-title for each div.tab-title

    // store a list of all .tab-title elements in the current .brxe-tabs-nested element
    const tabTitles = tabsNested[i].querySelectorAll(".tab-title")

    // loop through each .tab-title element
    for (let j = 0; j < tabTitles.length; j++) {
      tabTitles[j].classList.remove("brx-open")

      // set tabTitleText to the text content of the current tab title's div.brxe-text-basic element
      const tabTitleText =
        tabTitles[j].querySelector(".brxe-text-basic").textContent

      // set tabTitleSlug to the current tab title's text content, converted to lowercase and with spaces replaced with hyphens
      const tabTitleSlug = tabTitleText.toLowerCase().replace(/ /g, "-")

      // set the current tab title's data-tab-title attribute to the current tab title's slug
      tabTitles[j].setAttribute("data-tab-title", tabTitleSlug)

      // if the URL parameter matches the current tab title's slug, click on that tab title
      setTimeout(() => {
        if (tabParam === tabTitleSlug) {
          // click the tab title to open it
          tabTitles[j].click()
        }
      }, 1)
    }
  }
})
</script>

Note:

1. The code works with multiple Tabs (Nestable) elements on the same page.
2. Ensure that the tab titles are all unique across the nestable tabs elements.