forked from utkarshbhola/booksat-door
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
88 lines (52 loc) · 2.25 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
'use strict';
// modal variables
const modal = document.querySelector('[data-modal]');
const modalCloseBtn = document.querySelector('[data-modal-close]');
const modalCloseOverlay = document.querySelector('[data-modal-overlay]');
// modal function
const modalCloseFunc = function () { modal.classList.add('closed') }
// modal eventListener
modalCloseOverlay.addEventListener('click', modalCloseFunc);
modalCloseBtn.addEventListener('click', modalCloseFunc);
// notification toast variables
const notificationToast = document.querySelector('[data-toast]');
const toastCloseBtn = document.querySelector('[data-toast-close]');
// notification toast eventListener
toastCloseBtn.addEventListener('click', function () {
notificationToast.classList.add('closed');
});
// mobile menu variables
const mobileMenuOpenBtn = document.querySelectorAll('[data-mobile-menu-open-btn]');
const mobileMenu = document.querySelectorAll('[data-mobile-menu]');
const mobileMenuCloseBtn = document.querySelectorAll('[data-mobile-menu-close-btn]');
const overlay = document.querySelector('[data-overlay]');
for (let i = 0; i < mobileMenuOpenBtn.length; i++) {
// mobile menu function
const mobileMenuCloseFunc = function () {
mobileMenu[i].classList.remove('active');
overlay.classList.remove('active');
}
mobileMenuOpenBtn[i].addEventListener('click', function () {
mobileMenu[i].classList.add('active');
overlay.classList.add('active');
});
mobileMenuCloseBtn[i].addEventListener('click', mobileMenuCloseFunc);
overlay.addEventListener('click', mobileMenuCloseFunc);
}
// accordion variables
const accordionBtn = document.querySelectorAll('[data-accordion-btn]');
const accordion = document.querySelectorAll('[data-accordion]');
for (let i = 0; i < accordionBtn.length; i++) {
accordionBtn[i].addEventListener('click', function () {
const clickedBtn = this.nextElementSibling.classList.contains('active');
for (let i = 0; i < accordion.length; i++) {
if (clickedBtn) break;
if (accordion[i].classList.contains('active')) {
accordion[i].classList.remove('active');
accordionBtn[i].classList.remove('active');
}
}
this.nextElementSibling.classList.toggle('active');
this.classList.toggle('active');
});
}