https://www.esparkinfo.com/wp-content/themes/esparkbiz/esparkbiz-s…/script.js?ver=1790313493

1document.addEventListener("DOMContentLoaded", function () {
2    var prioritySections = document.querySelectorAll(
3        ".techstack_new",
4    );
5
6    prioritySections.forEach(function (section) {
7        var tabItems = section.querySelectorAll(".services-item");
8        var contentItems = section.querySelectorAll(
9            ".services-tab-content",
10        );
11        var selectedLabelText = section.querySelector(
12            "#technologySelectedLabelText",
13        );
14        var selectedLabelWrap = section.querySelector(
15            "#technologySelectedLabel",
16        );
17        var tabList = section.querySelector(
18            ".services-tab-list ul",
19        );
20
21        function activateTab(tabId) {
22            tabItems.forEach(function (item) {
23                if (item.id === tabId) {
24                    item.classList.add("active");
25                    if (selectedLabelText) {
26                        var textEl = item.querySelector(".text");
27                        if (textEl) {
28                            selectedLabelText.textContent = textEl.textContent;
29                        }
30                    }
31                } else {
32                    item.classList.remove("active");
33                }
34            });
35
36            contentItems.forEach(function (content) {
37                if (content.getAttribute("data-id") === tabId) {
38                    content.style.display = "block";
39                    content.animate([
40                        { transform: 'translateY(6px) scale(0.98)', opacity: 0 },
41                        { transform: 'translateY(0) scale(1)', opacity: 1 }
42                    ], {
43                        duration: 400,
44                        easing: 'ease-out',
45                        fill: 'forwards'
46                    });
47                } else {
48                    content.style.display = "none";
49                }
50            });
51        }
52
53        // Initial activation
54        if (tabItems.length > 0) {
55            activateTab(tabItems[0].id);
56        }
57
58        // Tab interactions (click for mobile, hover for desktop)
59        tabItems.forEach(function (item) {
60            item.addEventListener("click", function (e) {
61                if (window.innerWidth <= 991) {
62                    activateTab(item.id);
63                    // Close dropdown on mobile after selection
64                    if (tabList) {
65                        tabList.classList.remove("active");
66                    }
67                } else {
68                    // Prevent click action on desktop since hover handles it
69                    e.preventDefault();
70                }
71            });
72
73            // Hover handler for desktop
74            item.addEventListener("mouseenter", function () {
75                if (window.innerWidth > 991) {
76                    activateTab(item.id);
77                }
78            });
79        });
80
81        // Mobile dropdown toggle
82        if (selectedLabelWrap && tabList) {
83            selectedLabelWrap.addEventListener("click", function () {
84                if (window.innerWidth <= 991) {
85                    tabList.classList.toggle("active");
86                }
87            });
88        }
89    });
90});