# elementor/3.33.0-beta1/modules/atomic-widgets/elements/atomic-tabs/atomic-tabs-handler.js

Elementor Website Builder – more than just a page builder, version 3.33.0-beta1. 40 lines.

- Page: https://pluginprobe.com/plugins/elementor/3.33.0-beta1/code/modules/atomic-widgets/elements/atomic-tabs/atomic-tabs-handler.js
- Raw: https://pluginprobe.com/plugins/elementor/3.33.0-beta1/raw/modules/atomic-widgets/elements/atomic-tabs/atomic-tabs-handler.js
- Modified: 2025-10-21T08:17:48+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/elementor/3.33.0-beta1/code/modules/atomic-widgets/elements/atomic-tabs/atomic-tabs-handler.js#L10-L20`.

```javascript
import { register } from '@elementor/frontend-handlers';

register( {
	elementType: 'e-tabs',
	uniqueId: 'e-tabs-handler',
	callback: ( { element, signal } ) => {
		const tabs = element.querySelectorAll( '[data-element_type="e-tab"]' );
		const tabPanels = element.querySelectorAll( '[data-element_type="e-tab-panel"]' );

		const setActiveTab = ( id ) => {
			tabPanels.forEach( ( tabPanel ) => {
				const activeTab = tabPanel.getAttribute( 'data-tab-id' ) === id;

				if ( activeTab ) {
					tabPanel.style.removeProperty( 'display' );
					tabPanel.removeAttribute( 'hidden' );

					return;
				}

				tabPanel.style.display = 'none';
				tabPanel.setAttribute( 'hidden', 'true' );
			} );
		};

		const defaultActiveTab = element.getAttribute( 'data-active-tab' );

		setActiveTab( defaultActiveTab );

		tabs.forEach( ( tab ) => {
			const clickHandler = () => {
				const tabId = tab.getAttribute( 'data-id' );
				setActiveTab( tabId );
			};

			tab.addEventListener( 'click', clickHandler, { signal } );
		} );
	},
} );

```