# elementor/3.35.0-dev2/modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-preview-handler.js

Elementor Website Builder – more than just a page builder, version 3.35.0-dev2. 31 lines.

- Page: https://pluginprobe.com/plugins/elementor/3.35.0-dev2/code/modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-preview-handler.js
- Raw: https://pluginprobe.com/plugins/elementor/3.35.0-dev2/raw/modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-preview-handler.js
- Modified: 2025-12-22T12:25:58+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.35.0-dev2/code/modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-preview-handler.js#L10-L20`.

```javascript
import { register } from '@elementor/frontend-handlers';
import { Alpine, refreshTree } from '@elementor/alpinejs';
import { TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE, getTabId, getIndex } from './utils';

register( {
	elementType: 'e-tabs',
	id: 'e-tabs-preview-handler',
	callback: ( { element, signal, listenToChildren } ) => {
		window?.parent.addEventListener( 'elementor/navigator/item/click', ( event ) => {
			const { id, type } = event.detail;

			if ( type !== TAB_ELEMENT_TYPE && type !== TAB_CONTENT_ELEMENT_TYPE ) {
				return;
			}

			const targetElement = Alpine.$data( element ).$refs[ id ];

			if ( ! targetElement ) {
				return;
			}

			const targetIndex = getIndex( targetElement, type );
			Alpine.$data( element ).activeTab = getTabId( element.dataset.id, targetIndex );
		}, { signal } );

		// Re-initialize Alpine to sync with editor DOM manipulations that bypass Alpine's reactivity.
		listenToChildren( [ TAB_ELEMENT_TYPE, TAB_CONTENT_ELEMENT_TYPE ] )
			.render( () => refreshTree( element ) );
	},
} );

```