Toggle effect op faq item

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jorn Reed

Jorn Reed

14/06/2022 16:03:07
Quote Anchor link
Hoi,

Ik heb een button die een box kan togglen. Als je er op klikt, komt hij of verdwijnt het.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<button class="faq-question">Kan ik contact opnemen?</button>
<div class="faq-answer answer-hidden">
Ja dat kan.                    
</div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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');
        }
      });
  });

};


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?
 
PHP hulp

PHP hulp

04/02/2023 15:40:56
 
Ward van der Put
Moderator

Ward van der Put

14/06/2022 16:14:33
 
Jorn Reed

Jorn Reed

14/06/2022 16:16:27
Quote Anchor link
Ward van der Put op 14/06/2022 16:14:33:


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.
 
Ward van der Put
Moderator

Ward van der Put

14/06/2022 16:23:04
Quote Anchor link
Ik weet niet hoe ver je ermee kunt komen, maar omdat het om verschillende toestanden in HTML gaat, zou je overgangen daartussen moeten kunnen animeren met transitions in CSS:

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
 
Jan Koehoorn

Jan Koehoorn

14/06/2022 20:55:35
Quote Anchor link
Kan tegenwoordig prima zonder JavaScript:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.