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:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 526 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
WP Grid Builder Filters inside Bricks’ OffCanvas

WP Grid Builder Filters inside Bricks’ OffCanvas

This Pro tutorial provides the steps to move WP Grid Builder's filters inside the Bricks' native Offcanvas on smaller viewport widths. Let's work with the…
Pro
Horizontal Scrolling Tabs in Bricks

Horizontal Scrolling Tabs in Bricks

Nestable Tabs element in Bricks wraps into multiple lines out of the box at smaller viewport widths. This Pro tutorial provides the steps to remove…
Categories:
Tags:
How to sync two nestable sliders in Bricks

How to sync two nestable sliders in Bricks

In this tutorial, we'll learn how to sync two nestable sliders in Bricks: one will be the main slider and the other one will be…
Categories:
How to disable smooth scroll in Bricks

How to disable smooth scroll in Bricks

In certain situations like using ScrollSmoother, you may be looking to disable smooth scrolling functionality that’s built into Bricks.
Categories:
Setting Active Tab in Bricks’ Tabs (Nestable) Element

Setting Active Tab in Bricks’ Tabs (Nestable) Element

With Bricks' Nestable tab element, here's how we can set which tab is active by default.
Categories:
Pro
Button-specific HTML in Bricks Popup

Button-specific HTML in Bricks Popup

In the Bricks Facebook group a user asks: I need to create popups to expend the text (eg. read more). I wonder if I have…
Categories:
Pro
Grid.js in Bricks

Grid.js in Bricks

This Pro tutorial provides the steps to use Grid.js in a WordPress site powered by Bricks builder. Grid.js is a lightweight and performant JavaScript library…
Categories: