Bij het maken van een samenvouwing met Bootstrap 5 wordt gebruik gemaakt van de klasse `.collapse` en het `data-bs-toggle="collapse"` attribuut. Hier is een stap-voor-stap handleiding:
1. Maak het schakelelement:
- Voeg een knop of een ander element toe dat zal dienen als schakelaar om de ineenstorting te openen en te sluiten.
- Geef het toggle-element het kenmerk `data-bs-toggle="collapse"`.
- Wijs een unieke `data-bs-target` attribuutwaarde toe die overeenkomt met de ID van het element dat u wilt samenvouwen of uitvouwen.
2. Maak het opvouwbare element:
- Maak het element dat u wilt weergeven of verbergen wanneer op de schakelaar wordt geklikt.
- Geef dit element de klasse `.collapse` en de ID die overeenkomt met de `data-bs-target` waarde van het toggle-element.
3. Optionele klassen toevoegen:
- Bootstrap 5 biedt extra klassen om het uiterlijk van de ineenstorting te beheersen, zoals:
- `.show`:Deze klasse wordt gebruikt om in eerste instantie het samenvouwbare element weer te geven.
- `.collapse-horizontal`:Met deze klasse kunt u een horizontale samenvouwing maken in plaats van een verticale.
4. Inclusief Bootstrap CSS en JavaScript:
- Zorg ervoor dat u de Bootstrap CSS- en JavaScript-bestanden in uw HTML-document opneemt om de samenvouwfunctionaliteit in te schakelen.
Hier is een voorbeeld van HTML-code om een samenvouwing te creëren:
