Toggle effect op faq item
Ik heb een button die een box kan togglen. Als je er op klikt, komt hij of verdwijnt het.
Code (php)
1
2
3
4
2
3
4
<button class="faq-question">Kan ik contact opnemen?</button>
<div class="faq-answer answer-hidden">
Ja dat kan.
</div>
<div class="faq-answer answer-hidden">
Ja dat kan.
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
window.onload = function() {
const questions = document.querySelectorAll('.faq-question');
questions.forEach((question) => {
question.addEventListener('click', (e) => {
e.preventDefault();
e.target.classList.toggle('active');
const answer = question.nextElementSibling;
if(answer.classList.contains('faq-answer')){
answer.classList.toggle('answer-hidden');
}
});
});
};
const questions = document.querySelectorAll('.faq-question');
questions.forEach((question) => {
question.addEventListener('click', (e) => {
e.preventDefault();
e.target.classList.toggle('active');
const answer = question.nextElementSibling;
if(answer.classList.contains('faq-answer')){
answer.classList.toggle('answer-hidden');
}
});
});
};
Dit gebeurt nu heel simpel door de answer-hidden class te togglen. Maar ik vroeg me af of het met deze code mogelijk is in de css om een transition te maken dat het lijkt alsof het antwoord uit de vraag glijd. Dus dat de hoogte van 0 naar ... gaat?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
Ward van der Put op 14/06/2022 16:14:33:
Het kan nog simpeler, zonder JavaScript:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
Dat kende ik ook al, alleen wilde ik dit puur voor een beetje een smooth animatie. Dat zit helaas ook niet bij dat standaard summary element.
https://css-tricks.com/how-to-animate-the-details-element/
https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
font-family: Verdana;
}
.container {
margin: 10px 0;
padding: 20px;
border: 1px solid #666;
border-radius: 5px;
}
.faq-answer {
transition: all 1.5s ease-in-out;
opacity: 0;
margin: 10px 0;
}
label { cursor: pointer; }
input[type=checkbox] { display: none; }
input[type=checkbox]:checked +label ~.faq-answer{
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<input type="checkbox" id="faq-01" class="faq-question">
<label for="faq-01" class="faq-question">Vraag 1: kan ik...?</label>
<div class="faq-answer">Antwoord op vraag 1</div>
</div>
<div class="container">
<input type="checkbox" id="faq-02" class="faq-question">
<label for="faq-02" class="faq-question">Vraag 2: kan ik...?</label>
<div class="faq-answer">Antwoord op vraag 2</div>
</div>
<div class="container">
<input type="checkbox" id="faq-03" class="faq-question">
<label for="faq-03" class="faq-question">Vraag 3: kan ik...?</label>
<div class="faq-answer">Antwoord op vraag 3</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
font-family: Verdana;
}
.container {
margin: 10px 0;
padding: 20px;
border: 1px solid #666;
border-radius: 5px;
}
.faq-answer {
transition: all 1.5s ease-in-out;
opacity: 0;
margin: 10px 0;
}
label { cursor: pointer; }
input[type=checkbox] { display: none; }
input[type=checkbox]:checked +label ~.faq-answer{
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<input type="checkbox" id="faq-01" class="faq-question">
<label for="faq-01" class="faq-question">Vraag 1: kan ik...?</label>
<div class="faq-answer">Antwoord op vraag 1</div>
</div>
<div class="container">
<input type="checkbox" id="faq-02" class="faq-question">
<label for="faq-02" class="faq-question">Vraag 2: kan ik...?</label>
<div class="faq-answer">Antwoord op vraag 2</div>
</div>
<div class="container">
<input type="checkbox" id="faq-03" class="faq-question">
<label for="faq-03" class="faq-question">Vraag 3: kan ik...?</label>
<div class="faq-answer">Antwoord op vraag 3</div>
</div>
</body>
</html>