26th Feb '23
/
6 comments

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 632 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Enqueueing a JavaScript File in Bricks

Enqueueing a JavaScript File in Bricks

Bricks child theme's functions.php comes with code to enqueue (load) style.css on the front end. What if you want to load a custom JavaScript file…
Categories:
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:
Pro
Post Titles and Post Content Tabs in Bricks

Post Titles and Post Content Tabs in Bricks

How to set up Nestable tabs with post titles as the tab menu, and post content and/or any other post-specific data as the tab content.
Categories:
How to change the text of an element based on breakpoints without creating duplicated content

How to change the text of an element based on breakpoints without creating duplicated content

In this tutorial, we'll learn how to dynamically change the text of a basic text element based on the viewport width in Bricks. Introduction Sometimes…
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:
Pro
Dynamic Tabs in Bricks

Dynamic Tabs in Bricks

This Pro tutorial provides the steps to show the terms of a taxonomy as tab titles and corresponding posts as tab panes using a Tabs…
Categories:
Tags:
Pro
Opening Submenus with Click Instead of Hover in Bricks

Opening Submenus with Click Instead of Hover in Bricks

This Pro tutorial provides the code for opening submenus with click instead of hover in Bricks. Step 1 Add this in child theme's style.css: Step…
Categories: