CSE-TEAM2-ECO_TECH_WEBSITE/script.js at main · vegito-exe/CSE-TEAM2-ECO_TECH_WEBSITE · GitHub

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
const faqItems = document.querySelectorAll('.faq-item');


faqItems.forEach(item => {
    const question = item.querySelector('.faq-question');
    const answer = item.querySelector('.faq-answer');
    const arrow = item.querySelector('.arrow');

    question.addEventListener('click', function() {
        faqItems.forEach(otherItem => {
            if (otherItem !== item) {
                otherItem.classList.remove('active');
            }
        });

        item.classList.toggle('active');
    });
});

const right_arrow = document.getElementById("right-arrow")
const left_arrow = document.getElementById("left-arrow")
const card1 = document.getElementById("div-cards1")
const card2 = document.getElementById("div-cards2")
const card3 = document.getElementById("div-cards3")
const txt1 = document.getElementById("card-txt1")
const txt2 = document.getElementById("card-txt2")
const txt3 = document.getElementById("card-txt3")

let x = 1
right_arrow.onclick = function() {
      if (x == 3 ) {
        x = 1
      } else {x++}
     if (x == 1) {
        card3.classList.toggle("glass")
        card3.classList.toggle("card")
        txt3.classList.toggle("hide-txt")
        card1.classList.toggle("card")
        card1.classList.toggle("glass")
        txt1.classList.toggle("hide-txt")
     }
     else if (x == 2){
        card2.classList.toggle("glass")
        card2.classList.toggle("card")
        txt2.classList.toggle("hide-txt")
        card1.classList.toggle("card")
        card1.classList.toggle("glass")
        txt1.classList.toggle("hide-txt")
     } else {
        card3.classList.toggle("glass")
        card3.classList.toggle("card")
        txt3.classList.toggle("hide-txt")
        card2.classList.toggle("card")
        card2.classList.toggle("glass")
        txt2.classList.toggle("hide-txt")
     }
}

left_arrow.onclick = function() {
      if (x == 1 ) {
        x = 3
      } else {x--}
     if (x == 1) {
        card2.classList.toggle("glass")
        card2.classList.toggle("card")
        txt2.classList.toggle("hide-txt")
        card1.classList.toggle("card")
        card1.classList.toggle("glass")
        txt1.classList.toggle("hide-txt")
     }
     else if (x == 2){
        card3.classList.toggle("glass")
        card3.classList.toggle("card")
        txt3.classList.toggle("hide-txt")
        card2.classList.toggle("card")
        card2.classList.toggle("glass")
        txt2.classList.toggle("hide-txt")
     } else {
        card3.classList.toggle("glass")
        card3.classList.toggle("card")
        txt3.classList.toggle("hide-txt")
        card1.classList.toggle("card")
        card1.classList.toggle("glass")
        txt1.classList.toggle("hide-txt")
     }
}