1. HTML-structuur:

- Maak een containerelement met de klasse `container` waar u uw opvouwbare inhoud plaatst.

- Voeg binnen het `container`-element een ``-element toe dat zal fungeren als de samenvouwknop.

- Voeg onder de schakelknop een `

`-element toe dat de samenvouwbare inhoud zal bevatten. Zorg ervoor dat u de klasse `collapse` en een `id` attribuut toevoegt aan deze `

`, zoals `collapseExample`.

2. CSS-klassen:

- Voeg het Bootstrap CSS-bestand toe aan uw webpagina.

- Voeg de volgende CSS-klassen toe:

- klasse `collapse` naar de opvouwbare inhoud `

`.

- klasse `show` naar de opvouwbare inhoud `

` om deze in eerste instantie weer te geven (optioneel).

- klasse `collapsed` naar de schakelknop `

` om aanvankelijk de ingeklapte status aan te geven (optioneel).

3. JavaScript:

- Voeg het Bootstrap JavaScript-bestand toe aan uw webpagina.

- Voeg het volgende script toe:

```javascript

// Selecteer de schakelknop en opvouwbare inhoudselementen

const toggleBtn =document.querySelector('.toggle-btn');

const collapsibleContent =document.getElementById('collapseExample');

// Voeg gebeurtenislistener toe aan de schakelknop

toggleBtn.addEventListener('klik', function() {

// Schakel de klasse "show" in voor de opvouwbare inhoud

collapsibleContent.classList.toggle('show');

// Schakel de klasse "samengevouwen" in met de schakelknop

toggleBtn.classList.toggle('samengevouwen');

});

```

Dit script handelt de functionaliteit voor samenvouwen/uitvouwen af ​​wanneer op de schakelknop wordt geklikt.

Door deze stappen te volgen, kunt u eenvoudig een opvouwbaar element maken met Bootstrap 5.