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

Related Tutorials..

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
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…
Read more →
Categories: Bricks, Free
Tags: JavaScript
Opening RSS Block’s Links in New Tabs

Opening RSS Block’s Links in New Tabs

Looking to have links output by RSS Block (in the block editor) in new tab/window when using Bricks? Add this in your Bricks template/Page at…
Read more →
Categories: Bricks, Free
Tags: JavaScript
How to Create a Grid Slider in Bricks

How to Create a Grid Slider in Bricks

In this tutorial, we'll learn how to create multiple rows and columns inside the default nested slider of Bricks. Introduction A user recently asked in…
Read more →
Categories: Bricks, Free
Tags: JavaScript, Nested Slider
ACF Repeater Sub Field Values as Tabs in Bricks

ACF Repeater Sub Field Values as Tabs in Bricks

Bricks' query loop supports ACF Repeaters and Meta Box Groups out of the box besides posts, users and terms. This tutorial shows how we can…
Read more →
Categories: Bricks, Free, Plugins
Tags: ACF Pro, 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
Pro
[WooCommerce] Sticky on Scroll Add to Cart section in Bricks

[WooCommerce] Sticky on Scroll Add to Cart section in Bricks

Setting up a sticky section that fades in when scrolling down and fades away when scrolled to the top.
Read more →
Categories: Bricks, Pro
Tags: JavaScript, sessionStorage
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…
Read more →
Categories: Bricks, Free
Tags: JavaScript, Nested Slider