Setting Active Tab in Bricks’ Tabs (Nestable) Element

In the Bricks Facebook group a user asks:

I have a Nestable tab with 2 tabs. how can I determine which tab is the default active?

We can do this with CSS alone or custom JavaScript (thanks, ChatGPT).

By default, the first tab item will be the active one.

CSS

Move the Title and Pane elements of the tab you want to be initially focused/active to be at the top of the structure.

Add this custom CSS in the Tabs (Nestable) element:

%root% > .tab-menu .tab-title:nth-child(2) {
	order: -1;
}

Before:

After:

JavaScript

Adding the following inside the Bricks editor at Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts will make the 2nd tab of a Tabs (Nestable) element active instead on page load:

<script>

// Simulate a mouse click on the second tab to activate it on page load
document.addEventListener('DOMContentLoaded', function() {
  // Get the second tab element
  const secondTab = document.querySelector('#brxe-xmqjft .tab-title:nth-child(2)');

  // Function to simulate a mouse click event
  function simulateClick(element) {
    const event = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window
    });
    element.dispatchEvent(event);
  }

  // Simulate a mouse click on the second tab
  simulateClick(secondTab);
});

</script>

Repalce #brxe-xmqjft with the HTML ID of the “Tab menu” element.

Before:

After:

Reference

https://x.com/srikat/status/1732725019749523705