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

Elementor Website Builder – more than just a page builder, version 4.3.3. 41 lines.

- Page: https://pluginprobe.com/plugins/elementor/4.3.3/code/modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-preview-handler.js
- Raw: https://pluginprobe.com/plugins/elementor/4.3.3/raw/modules/atomic-widgets/elements/atomic-tabs/handlers/atomic-tabs-preview-handler.js
- Modified: 2026-05-20T12:19:28+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/4.3.3/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, getIndex } from './utils';
import { setActiveTabIndex } from './editor-tabs-state';

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 );
			setActiveTabIndex( 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( ( event ) => {
				const childElement = event.detail.element;
				const nearestTabs = childElement.closest( '[data-e-type="e-tabs"]' );

				if ( nearestTabs !== element ) {
					return;
				}

				refreshTree( element );
			} );
	},
} );

```