https://www.phclondon.org/js/script.js

1const toggler = document.querySelector('.toggle');
2const navbar = document.querySelector('.nav-mob');
3
4toggler.addEventListener('click', () => {
5    let navIcon = toggler.querySelector('i');
6    navbar.classList.toggle('show-nav');
7    if (navIcon.classList.contains('uil-bars')) {
8        navIcon.classList.value = 'uil uil-times'
9    } else {
10        navIcon.classList.value = 'uil uil-bars'
11    }
12})
13
14const dropdownTrigger = document.querySelectorAll('.dropdown-trigger');
15dropdownTrigger.forEach(el => {
16    el.addEventListener('click', () => {
17        el.parentElement.parentElement.classList.toggle('active-nav');
18    })
19})
20
21// [TABS]
22const allTabsBtns = document.querySelectorAll('.tab-trigger');
23allTabsBtns.forEach(tab => {
24    tab.addEventListener('click', (e) => {
25        document.querySelectorAll('.tabs__links').forEach(tb => tb.classList.remove('active'));
26        e.preventDefault();
27        e.target.classList.add('active');
28        document.querySelectorAll('.tab-container').forEach(el => {
29            el.classList.add('d-none')
30        });
31        let target = document.querySelector(tab.getAttribute('href'));
32        target.classList.remove('d-none');
33        target.classList.add('d-flex');
34    })
35});
36
37
38const triggerSearch = document.querySelectorAll('.search-trigger');
39const targetSearch = document.querySelector('#search-modal');
40
41triggerSearch.forEach(el => {
42    el.addEventListener('click', (event) => {
43        targetSearch.classList.toggle('show-modal');
44    })
45})
46
47targetSearch.addEventListener('click', (event) => {
48    if (event.target.classList.contains('show-modal')) {
49        targetSearch.classList.remove('show-modal')
50    }
51})
52
53
54// [SLIDER]
55$('.hero-slider').slick({
56    slidesToShow: 1,
57    dots: false,
58    fade: true,
59    autoplay: true,
60    cssEase: 'linear',
61    speed: 800,
62    infinite: true,
63    autoplaySpeed: 5000,
64    prevArrow: "#hero-back",
65    nextArrow: "#hero-next",
66});
67
68
69
70// [SLIDER-TEXT]
71$('.slider-text').slick({
72    slidesToShow: 1,
73    dots: false,
74    autoplay: true,
75    cssEase: 'linear',
76    speed: 35500,
77    infinite: true,
78    autoplaySpeed: 0,
79    variableWidth: true,
80    arrows: false,
81    pauseOnHover: true,
82});