https://www.accessbankplc.com/scripts/js/quickbucks.js

1//import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.esm.browser.min.js'
2
3const regSwiper = new Swiper('.qb-registering', {
4  loop: true,
5  // slidesPerView: 4,
6  breakpoints: {
7    480: {
8      slidesPerView: 2,
9    },
10    640: {
11      slidesPerView: 2,
12    },
13    960: {
14      slidesPerView: 3,
15    },
16    1160: {
17      slidesPerView: 3,
18    },
19    1366: {
20      slidesPerView: 4,
21    },
22  },
23  navigation: {
24    nextEl: '.qb-register-next',
25    prevEl: '.qb-register-prev',
26  },
27})
28const deviceSwiper = new Swiper('.qb-device-fin', {
29  loop: true,
30  breakpoints: {
31    480: {
32      slidesPerView: 2,
33    },
34    640: {
35      slidesPerView: 2,
36    },
37    960: {
38      slidesPerView: 3,
39    },
40    1160: {
41      slidesPerView: 3,
42    },
43    1366: {
44      slidesPerView: 4,
45    },
46  },
47  navigation: {
48    nextEl: '.qb-device-fin-next',
49    prevEl: '.qb-device-fin-prev',
50  },
51})
52const businessesSwiper = new Swiper('.qb-businesses', {
53  loop: true,
54  breakpoints: {
55    480: {
56      slidesPerView: 2,
57    },
58    640: {
59      slidesPerView: 2,
60    },
61    960: {
62      slidesPerView: 3,
63    },
64    1160: {
65      slidesPerView: 3,
66    },
67    1366: {
68      slidesPerView: 4,
69    },
70  },
71  navigation: {
72    nextEl: '.qb-businesses-next',
73    prevEl: '.qb-businesses-prev',
74  },
75})
76const businessesfirstSwiper = new Swiper('.qb-businesses-first', {
77  loop: true,
78  breakpoints: {
79    480: {
80      slidesPerView: 2,
81    },
82    640: {
83      slidesPerView: 2,
84    },
85    960: {
86      slidesPerView: 3,
87    },
88    1160: {
89      slidesPerView: 3,
90    },
91    1366: {
92      slidesPerView: 4,
93    },
94  },
95  navigation: {
96    nextEl: '.qb-businesses-first-next',
97    prevEl: '.qb-businesses-first-prev',
98  },
99})
100const businessesrepeatSwiper = new Swiper('.qb-businesses-repeat', {
101  loop: true,
102  breakpoints: {
103    480: {
104      slidesPerView: 2,
105    },
106    640: {
107      slidesPerView: 2,
108    },
109    960: {
110      slidesPerView: 3,
111    },
112    1160: {
113      slidesPerView: 3,
114    },
115    1366: {
116      slidesPerView: 4,
117    },
118  },
119  navigation: {
120    nextEl: '.qb-businesses-repeat-next',
121    prevEl: '.qb-businesses-repeat-prev',
122  },
123})
124
125// Quick Buck - Accordion
126document.addEventListener('DOMContentLoaded', function () {
127  const accordionHeaders = document.querySelectorAll(
128    '.quick-buck-accordion-header'
129  )
130  accordionHeaders.forEach((header) => {
131    header.addEventListener('click', toggleAccordion)
132    header.addEventListener('keydown', function (e) {
133      if (e.key === 'Enter' || e.key === ' ') {
134        toggleAccordion.call(header, e)
135      }
136    })
137  })
138
139  function toggleAccordion(event) {
140    const content = this.nextElementSibling
141    const button = this.querySelector('.quick-buck-accordion-button')
142    const isExpanded = button.getAttribute('aria-expanded') === 'true'
143
144    // Toggle the current section
145    button.setAttribute('aria-expanded', !isExpanded)
146    content.classList.toggle('open', !isExpanded)
147
148    // Optionally, close other sections (for exclusive accordion behavior)
149    accordionHeaders.forEach((otherHeader) => {
150      if (otherHeader !== this) {
151        const otherContent = otherHeader.nextElementSibling
152        const otherButton = otherHeader.querySelector(
153          '.quick-buck-accordion-button'
154        )
155        otherButton.setAttribute('aria-expanded', 'false')
156        otherContent.classList.remove('open')
157      }
158    })
159  }
160
161  // Adding keyboard accessibility for accordion
162  // const accordionContainer = document.getElementById('quickBuckAcordion')
163  const accordionContainer = document.getElementsByClassName(
164    'bullet-loan-accordion'
165  )[0]
166  accordionContainer.addEventListener('keydown', function (event) {
167    const activeElement = document.activeElement
168    const isAccordionHeader = activeElement.classList.contains(
169      'quick-buck-accordion-header'
170    )
171
172    if (!isAccordionHeader) return
173
174    switch (event.key) {
175      case 'ArrowDown':
176        focusNextAccordionHeader(activeElement)
177        break
178      case 'ArrowUp':
179        focusPreviousAccordionHeader(activeElement)
180        break
181      case 'Home':
182        focusFirstAccordionHeader()
183        break
184      case 'End':
185        focusLastAccordionHeader()
186        break
187      default:
188        break
189    }
190  })
191
192  function focusNextAccordionHeader(currentHeader) {
193    const nextHeader = currentHeader.nextElementSibling.nextElementSibling
194    if (nextHeader) {

195      nextHeader.focus()
196    }
197  }
198
199  function focusPreviousAccordionHeader(currentHeader) {
200    const previousHeader =
201      currentHeader.previousElementSibling.previousElementSibling
202    if (previousHeader) {
203      previousHeader.focus()
204    }
205  }
206
207  function focusFirstAccordionHeader() {
208    accordionHeaders[0].focus()
209  }
210
211  function focusLastAccordionHeader() {
212    accordionHeaders[accordionHeaders.length - 1].focus()
213  }
214})