jQuery(document).ready(function($) {
    
    $(document).on('click', '.sifency-vtabs-nav-item', function(e) {
        e.preventDefault();
        var $this = $(this);
        
        // Prevent click if already active
        if ($this.hasClass('active')) return;

        var index = $this.data('index');
        var $wrapper = $this.closest('.sifency-vtabs-wrapper');
        
        // 1. Handle Navigation Class
        $wrapper.find('.sifency-vtabs-nav-item').removeClass('active');
        $this.addClass('active');
        
        // 2. Handle Content Switching (Instant switch + CSS Animation triggers)
        var $contents = $wrapper.find('.sifency-vtabs-content-item');
        
        // Hide all
        $contents.removeClass('active');
        
        // Show new one
        var $newContent = $wrapper.find('.sifency-vtabs-content-item[data-index="' + index + '"]');
        $newContent.addClass('active');
        
        // 3. Reset Animation
        // By removing and re-adding the inner wrapper, we force the CSS keyframe to replay
        var $inner = $newContent.find('.sifency-vtabs-inner');
        var html = $inner.html();
        // This trick forces browser repaint
        $inner.removeClass('sifency-vtabs-inner');
        void $inner.get(0).offsetWidth; 
        $inner.addClass('sifency-vtabs-inner');
    });

});