https://www.synchrony.com/syc/js/tab-panels.js?v=1787145855075

1(() => {
2  const tabMobileButton = document.getElementById("tab-mobile-button");
3  const siteSearchTabs = document.getElementById("site-search-tabs");
4  const mobileHeading = document.getElementById("mobile-tab-heading");
5  const mobileTabsAccordion = document.querySelector(
6    ".pagefx-accordion.no-bind"
7  );
8  const mobileTabsAccordionTrigger = mobileTabsAccordion
9    ? mobileTabsAccordion.querySelector(".pagefx-accordion__trigger")
10    : null;
11  const mobileTabsAccordionTarget = mobileTabsAccordion
12    ? mobileTabsAccordion.querySelector(".pagefx-accordion__target")
13    : null;
14
15  const mobileTabButtons = mobileTabsAccordionTarget
16    ? mobileTabsAccordionTarget.querySelectorAll(".tab")
17    : null;
18
19  function setupTabs() {
20    document.querySelectorAll(".tab-btn").forEach((button) => {
21      button.addEventListener("click", (e) => {
22        const sidebar = button.parentElement;
23        const tabs = sidebar.parentElement;
24        const tabNumber = button.dataset.forTab;
25        const tabActivate = tabs.querySelector(
26          `.tab-content[data-tab="${tabNumber}"]`
27        );
28
29        if (siteSearchTabs) {
30          siteSearchTabs.classList.remove("active");
31          siteSearchTabs.ariaHidden = "true";
32          if (tabMobileButton) tabMobileButton.classList.remove("active");
33          siteSearchTabs.ariaExpanded = "false";
34          if (mobileHeading) mobileHeading.innerText = e.target.innerText;
35        }
36
37        sidebar.querySelectorAll(".tab-btn").forEach((button) => {
38          button.classList.remove("tab-btn-active");
39          button.setAttribute("aria-selected", "false");
40        });
41        tabs.querySelectorAll(".tab-content").forEach((tab) => {
42          tab.classList.remove("tab-content-active");
43          tab.ariaHidden = "true";
44        });
45        button.classList.add("tab-btn-active");
46        button.setAttribute("aria-selected", "true");
47        tabActivate.classList.add("tab-content-active");
48        tabActivate.ariaHidden = "false";
49      });
50    });
51  }
52
53  if (mobileTabsAccordion) {
54    mobileTabsAccordion.addEventListener("click", (e) => {
55      if (e.currentTarget.classList.contains("active")) {
56        closeMobileTabsAccordion();
57      } else {
58        openMobileTabsAccordion();
59      }
60    });
61  }
62
63  document.addEventListener("DOMContentLoaded", () => {
64    setupTabs();
65    window.addEventListener("click", (e) => {
66      if (!siteSearchTabs || !tabMobileButton) return;
67
68      if (
69        !e.target.closest(".navigation") &&
70        !e.target.closest("#tab-mobile-button") &&
71        !e.target.closest("#site-search-tabs") &&
72        !e.target.closest(".swiper") &&
73        siteSearchTabs.classList.contains("active")
74      ) {
75        siteSearchTabs.classList.remove("active");
76        siteSearchTabs.ariaHidden = "true";
77        tabMobileButton.classList.remove("active");
78      }
79    });
80  });
81
82  document.addEventListener("click", (e) => {
83    if (!e.target.closest(".mobile-controls") && mobileTabsAccordion) {
84      closeMobileTabsAccordion();
85    }
86  });
87
88  if (mobileTabButtons) {
89    mobileTabButtons.forEach((button) => {
90      button.addEventListener("keydown", (e) => {
91        if (e.key === "Enter") {
92          e.currentTarget.click();
93        }
94      });
95    });
96  }
97
98  function openMobileTabsAccordion() {
99    mobileTabsAccordion.classList.add("active");
100    mobileTabsAccordionTrigger.classList.add("active");
101    mobileTabsAccordionTrigger.setAttribute("aria-expanded", "true");
102    mobileTabsAccordionTarget.classList.add("active");
103    mobileTabButtons.forEach((button) => {
104      button.setAttribute("tabindex", "0");
105    });
106  }
107
108  function closeMobileTabsAccordion() {
109    mobileTabsAccordion.classList.remove("active");
110    mobileTabsAccordionTrigger.classList.remove("active");
111    mobileTabsAccordionTrigger.setAttribute("aria-expanded", "false");
112    mobileTabsAccordionTarget.classList.remove("active");
113    mobileTabButtons.forEach((button) => {
114      button.setAttribute("tabindex", "-1");
115    });
116  }
117
118  function toggleMobileMenu() {
119    if (siteSearchTabs.classList.contains("active")) {
120      siteSearchTabs.classList.remove("active");
121      siteSearchTabs.ariaHidden = "true";
122      tabMobileButton.classList.remove("active");
123    } else {
124      siteSearchTabs.classList.add("active");
125      siteSearchTabs.ariaHidden = "false";
126      tabMobileButton.classList.add("active");
127      siteSearchTabs.ariaExpanded = "true";
128    }
129  }
130  if (tabMobileButton)
131    tabMobileButton.addEventListener("click", toggleMobileMenu);
132
133  // Handle 768px breakpoint for featured-deals tabs
134  function handleTabRoles(isMobile) {
135    const tablist = document.querySelector('.tabs[role="tablist"], .tabs');
136    const tabs = document.querySelectorAll('.tab-btn[role="tab"], .tab-btn');
137    const panels = document.querySelectorAll('.tab-content[role="tabpanel"], .tab-content');
138
139    if (isMobile) {
140      if (tablist) tablist.removeAttribute('role');

141      tabs.forEach((el) => {
142        el.removeAttribute('role');
143        el.removeAttribute('aria-selected');
144      });
145      panels.forEach((el) => {
146        el.removeAttribute('role');
147        el.removeAttribute('aria-label');
148        el.removeAttribute('aria-hidden');
149      });
150    } else {
151      if (tablist) tablist.setAttribute('role', 'tablist');
152      tabs.forEach((el) => {
153        el.setAttribute('role', 'tab');
154        el.setAttribute('aria-selected', el.classList.contains('tab-btn-active') ? 'true' : 'false');
155      });
156      panels.forEach((el) => {
157        el.setAttribute('role', 'group');
158        el.setAttribute('aria-hidden', el.classList.contains('tab-content-active') ? 'false' : 'true');
159      });
160    }
161  }
162
163  // Media query listener for 768px breakpoint
164  const mq768 = window.matchMedia('(max-width: 768px)');
165  document.addEventListener('DOMContentLoaded', () => {
166    handleTabRoles(mq768.matches);
167  });
168  mq768.addEventListener('change', (e) => {
169    handleTabRoles(e.matches);
170  });
171})();