Opens in a new tab
11th Feb '23
/
3 comments

Switching Tabs on Hover in Bricks

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

Note

This also works with multiple instances of nestable tabs elements on the same page.

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:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:
Bricks
JavaScript
Pro
Tabs

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 634 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
How to Add a Live Search to Filter Posts Grouped by Categories in Tabs

How to Add a Live Search to Filter Posts Grouped by Categories in Tabs

This Pro tutorial builds on top of the earlier Dynamic Tabs in Bricks tutorial and provides steps to add a live search input for filtering…
Read more →
Categories: Bricks, JavaScript, Pro
Tags: Tabs
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…
Read more →
Categories: Bricks, Pro
Tags: Tabs
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…
Read more →
Categories: Bricks, Free
Tags: JavaScript
Pro
How to Link to a Specific Tab in Bricks

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…
Read more →
Categories: Bricks, Pro
Tags: JavaScript, Tabs
Pro
Post Title at a Different Location on Image Hover

Post Title at a Different Location on Image Hover

This Pro tutorial provides the steps to update the text of a sticky div with the title of the post that is hovered on the…
Read more →
Categories: Bricks, Pro
Tags: JavaScript
Pro
tsParticles in Bricks

tsParticles in Bricks

Updated on 5 Aug 2023 This Pro tutorial provides the steps to set up tsParticles, a lightweight TypeScript (uses JavaScript) library for creating particles as…
Read more →
Categories: Bricks, Pro
Tags: JavaScript
Pro
Deep Linking to Headings inside Bricks Tab Panes via URL Hash

Deep Linking to Headings inside Bricks Tab Panes via URL Hash

Learn how to link to a specific heading inside a Tabs (Nestable) element's tab pane content using custom JavaScript.
Read more →
Categories: Bricks, JavaScript, Plugins, Pro
Tags: Tabs
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…
Read more →
Categories: Bricks, Pro
Tags: Grid.js, JavaScript