De accordeon Bric biedt een manier om grote hoeveelheden inhoud op te splitsen en te wisselen tussen verbergen en weergeven. Accordeons bestaan uit verschillende subelementen, zoals de Kaart Bric en Div houder Bric, waardoor ze eenvoudig kunnen worden aangepast en onafhankelijk kunnen worden gestyled.
Om meer accordeonsecties toe te voegen, selecteert u eenvoudig een van de kaarten (te vinden in de hoofdaccordeon-div-container) via de lagenboom en dupliceert u deze met de sneltoets D.
Structuur
De structuur van een accordeon is iets complexer dan de meeste andere Brics gevonden binnen Blocs Het bestaat uit een Div houder Bric dat heeft zijn Type ingesteld op een Accordeon Container en ID ingesteld op een unieke waarde, bijvoorbeeld accordeon-17605 Binnen deze container zijn er meerdere Kaart Brics Elke kaart Bric een Link Bric binnen het kaartkopgedeelte en een extra Div container die het kaartgedeelte bevat.
Communicatie
De accordeon Bric functies worden aangestuurd via de Link Bric (gevonden in het koptekstgedeelte van een kaart) en de Div container (die het kaartgedeelte bevat). Beide items hebben aangepaste gegevensattributen toegepast om ze de typische accordeonfunctionaliteit te geven en hen in staat te stellen met elkaar te communiceren.
Accordeon Link Bric
De link is het element waarop u klikt om het accordeongedeelte weer te geven. Dit item heeft een specifieke opzet waardoor het als onderdeel van een accordeon kan werken. Het heeft zijn wisselwerking ingesteld op geen en het heeft ook verschillende aangepaste gegevensattributen, waarvan de belangrijkste de gegevensdoel en aria-controles.
Koppel gegevensattributen
Dé gegevensdoel attribuut heeft bijvoorbeeld een waarde die is ingesteld op een unieke referentie # accordeon-17605-item-1. De aria-controles attribuut bevat een bijna identieke waarde als de gegevensdoel attribuut, maar heeft bijvoorbeeld de # aan het begin verwijderd accordeon-17605-item-1 Deze unieke referenties moeten overeenkomen met de ID van de corresponderende div-container waarin het kaartlichaam is genest.
Accordeon Div-container
Binnen elke kaart Bric (te vinden in de hoofdcontainer van de accordeon) is een extra Div container met zijn ID ingesteld op een unieke waarde, bijvoorbeeld accordeon-17605-item-1 Deze ID-waarde moet overeenkomen en overeenkomen met de aangepaste gegevensattributen, gegevensdoel en aria-controles gevonden op de link Bric (bevindt zich in het kaartkopgedeelte).
Deze div container Bric bevat ook verschillende aangepaste gegevensattributen, waarvan de belangrijkste data-ouder Deze waarde van dit gegevenskenmerk moet overeenkomen met de ID van de hoofdaccordeonhouder, bijvoorbeeld # accordeon-17605 Dit gegevensattribuut vertelt de browser op welke accordeoncontainer deze sectie betrekking heeft.
Als u wijzigingen aanbrengt in de gegevensattributen van de accordeonkoppeling gegevensdoel or aria-controles, zorg ervoor dat u het ID voor de relevante div-container (die het kaartgedeelte bevat) en vice versa.
Voor meer gedetailleerde informatie over hoe accordeons werken, verwijzen wij u naar het Bootstrap 4 documenten.