De Accordion Bric biedt een manier om grote hoeveelheden content te verbergen en te tonen. Accordeons bestaan uit verschillende subelementen, zoals de Kaart Bric en Div container Bric, waardoor ze eenvoudig onafhankelijk van elkaar kunnen worden aangepast en 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 container Bric die 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 heeft een Link Bric in de kaartkopsectie en een extra Div container die het kaartgedeelte bevat.
Communicatie
De accordeon Bric-functies worden aangestuurd via de Link Bric (te vinden in de headersectie 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
Ocuco's Medewerkers 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
In elke kaart Bric (te vinden in de accordeon hoofdcontainer) zit 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 te vinden op de link Bric (in de header van de kaart).
Deze div-container Bric bevat ook verschillende aangepaste gegevensattributen, waarvan de belangrijkste is 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.