JavaScript_Projects/Questions.js at main · osama-shahzad-ux/JavaScript_Projects · 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
// using selectors inside the elements
const questions = document.querySelectorAll('.question');

questions.forEach(function(question){
    const btn = question.querySelector('.question-btn');
    btn.addEventListener('click', function(){
        questions.forEach(function(item){
            if(item !== question){
                item.classList.remove('show-text');
            }
        });
        question.classList.toggle('show-text');
    });
});
// Traversing the DOM
// const btns = document.querySelectorAll('.question-btn');

// btns.forEach(function(btn){
//     btn.addEventListener('click', function(e){
//         const question = e.currentTarget.parentElement.parentElement;
//         question.classList.toggle('show-text');
//         if(question.classList.contain('show-text')){

//         }
//     })
// });

// const questions = document.querySelectorAll('.question');

// questions.forEach(function(question){
//         // console.log(question);
//     const btn = question.querySelector('.question-btn');
//     // console.log(btn);
//     btn.addEventListener('click', function(){
//         questions.forEach(function(item){
//             // console.log(item)
//             if(item !== 'show-text'){
//                 item.classList.remove('show-text')
//             }
//             else{
//                 item.classList.add('show-text')
//             }

//         })
//         question.classList.toggle('show-text')
//     })
// });