JQuery – vervolg

We gaan nu werken met:

Meerdere knoppen
Animatie (in- en uitfaden)
Klassen toevoegen/verwijderen (om opmaak te veranderen)
Een klein beetje logica (if / else)

Oefening: Maak een interactief info-paneel

We gaan een kleine “informatiebox” maken. De gebruiker kan met knoppen:

De tekst laten verschijnen en verdwijnen
De kleur van de tekst veranderen
De tekst groter of kleiner maken

✅ 1. De HTML-structuur

<!DOCTYPE html>
<html>
<head>
    <title>Info Paneel met jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #infoBox {
            display: none;
            padding: 20px;
            border: 1px solid #ccc;
            width: 300px;
            margin-top: 10px;
        }

        .groot {
            font-size: 24px;
        }

        .rood {
            color: red;
        }
    </style>
</head>
<body>

    <h2>Interactie met jQuery</h2>

    <button id="toonVerberg">Toon / Verberg Info</button>
    <button id="kleurVerander">Verander Kleur</button>
    <button id="tekstGrootte">Groot / Normaal</button>

    <div id="infoBox">
        Dit is een informatiepaneel met jQuery-effecten!
    </div>

    <script>
        // jQuery code komt hieronder
    </script>

</body>
</html>

✅ 2. jQuery toevoegen in het `<script>`-gedeelte

$(document).ready(function() {
    
    // Toggle (aan/uit) van infoBox met fade effect
    $('#toonVerberg').click(function() {
        $('#infoBox').fadeToggle();
    });

    // Toggle de kleurklasse 'rood'
    $('#kleurVerander').click(function() {
        $('#infoBox').toggleClass('rood');
    });

    // Toggle de tekstgrootte
    $('#tekstGrootte').click(function() {
        $('#infoBox').toggleClass('groot');
    });

});

🔍 Wat gebeurt hier precies?

1. `$('#toonVerberg').click(...)`

Als je op de knop klikt, wordt #infoBox zichtbaar of onzichtbaar gemaakt met een mooie fade-animatie:
→ fadeToggle() wisselt tussen fadeIn en fadeOut.

2. `toggleClass('rood')`

Als de class nog niet aanwezig is, wordt hij toegevoegd → tekst wordt rood.
Als hij wel al aanwezig is, wordt hij verwijderd → tekst wordt weer zwart.

3. `toggleClass('groot')`

Hetzelfde als hierboven, maar dan voor de grootte van de tekst.

🎯 Wat leer je van deze oefening?

Hoe je meerdere knoppen gebruikt voor verschillende acties
Hoe je animaties toepast (fade in/out)
Hoe je met klassen de opmaak dynamisch aanpast
Hoe je herbruikbare code schrijft op een overzichtelijke manier

🤹‍♀️ Uitdaging: Zelf uitbreiden

Wil je jezelf extra uitdagen? Probeer dit:

Voeg een knop toe die de tekst helemaal verandert (bijvoorbeeld naar een andere zin).
Maak een knop “Reset” die de oorspronkelijke stijl terugzet.
Voeg een schuif-effect toe met .slideToggle() in plaats van .fadeToggle().

Oefening: Maak een interactief info-paneel

✅ 1. De HTML-structuur

✅ 2. jQuery toevoegen in het <script>-gedeelte