Met een collapse kan secundaire informatie verborgen worden. Door op de titel te klikken wordt de informatie zichtbaar. De collapse kan ook standaard geopend worden door de class `collapse__details--open` aan het details element toe te voegen.
Toegankelijkheid Als de collapse tekst bevat kan je er voor zorgen dat voor een blinde bezoeker de tekst meteen opgelezen wordt door in de collapse het attribuut `aria-live="polite"` op te nemen.
Standaard collapse
Voorbeeld van een standaard collapse. Het voorbeeld staan zo ingesteld dat de collapse standaard ‘open’ staat.
Titel van collapse
// Load collapse component
System.import('/uno/components/collapse/collapse.js').then(function (module) {
// Select all collapsible elements on the page
var collapses = document.querySelectorAll('[x-uno-collapse]');
// Initialize all collapses
for (var i = 0; i < collapses.length; i++) {
new module.Collapse(collapses.item(i));
}
});
collapse met inspringing
Voeg de class collapse__details--indented
toe aan de details
zodat deze uitlijnd met de titel
Titel van collapse
collapse zonder achtergrond
Voeg de class collapse--no-background
toe aan de collapse
om de standaard achtergrond weg te halen.
Titel van collapse
Versimpelde collapse
Voeg de class collapse--simple
toe aan de collapse
om een simpelere variant van de collapse te gebruiken.
Titel van collapse
collapse groeperen
Er kan een groep van collapse gemaakt worden door het attribuut
x-uno-collapse-group
toe te voegen. In deze groep kan er maar
één collapse tegelijkertijd open staan. In dit voorbeeld is de
naam van de groep ‘example’.
Titel van collapse
Humani generiss sunt dominas de nobilis compater.
Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris:
- Fiscina de brevis gallus, captis bromium!
- Solitudo potuss, tanquam azureus adiurator.
- Toruss persuadere, tanquam peritus danista.
Titel van collapse
Als alternatief kan een x-uno-collapse-group
op een omliggend element
geplaatst worden.
Titel van collapse
Humani generiss
Cliniass cadunt in audax cirpi Link opent in nieuw tabblad
Humani generiss sunt dominas de nobilis compater Link opent in nieuw tabblad
Titel van collapse
Collapse target
Het kan voorkomen dat de .collapse__header
en de
.collapse__details
niet direct na elkaar in de dom (kunnen)
staan. Voeg in dat geval het attribuut x-uno-collapse-target="{id van details element}"
toe aan de header om deze aan de details te koppelen.
Titel van collapse
Collapse met plus
Voorbeeld van een collapse met een plus en min. Het voorbeeld staat zo ingesteld dat de collapse standaard ‘gesloten’ is.
Titel van collapse
Titel van collapse
Titel van collapse
collapsable tabel
Binnen een tabel kunnen ook collapses zitten. Gebruik als target de tr
.
On Internet Explorer wordt geen animatie getoond.
Opleidingsstelsel | Opleidingscode | Type |
---|---|---|
Centraal register | – | MBO-Onderwijslicentie |
Proin quis massa a quam consequat cursus fringilla vel purus. Nunc at felis feugiat, aliquet massa eu, porta mauris. Sed ac turpis at dolor consequat venenatis. Aenean sed blandit leo. Suspendisse dignissim arcu tortor, in faucibus arcu fringilla vitae. Maecenas at velit quis elit tincidunt pellentesque in id erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum bibendum ut erat non vehicula. Quisque at lacus nec sem pulvinar interdum. |
||
Beroepsonderwijs | – | Examenlicentie |
Proin quis massa a quam consequat cursus fringilla vel purus. Nunc at felis feugiat, aliquet massa eu, porta mauris. Sed ac turpis at dolor consequat venenatis. Aenean sed blandit leo. Suspendisse dignissim arcu tortor, in faucibus arcu fringilla vitae. Maecenas at velit quis elit tincidunt pellentesque in id erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum bibendum ut erat non vehicula. Quisque at lacus nec sem pulvinar interdum. |
Javascript
De collapse maakt gebruik van javascript voor het openen en sluiten van de
details. Daarvoor is het nodig de collapse
class in te laden.
// Load collapse component
System.import('/uno/components/collapse/collapse.js').then(function (module) {
// Select all collapsible elements on the page
var collapses = document.querySelectorAll('[x-uno-collapse]');
// Initialize all collapses
for (var i = 0; i < collapses.length; i++) {
new module.Collapse(collapses.item(i));
}
});
In de voorbeelden wordt het attribuut x-uno-collapse
gebruikt om de
collapses te initialiseren, dit is optioneel, elke querySelector kan
gebruikt worden voor initialisatie.
/* Voorbeeld met alternatieve querySelector */
var collapse = new module.Collapse(document.getElementById('my-collapse'));
Publieke methodes
Methode | Omschrijving |
---|---|
open() |
Opent de collapse |
close() |
Sluit de collapse |
toggle() |
Opent of sluit de collapse |
destroy() |
Verwijdert de collapse, verwijdert alle event-listeners. Roep deze methode aan wanneer je de collapse wilt verwijderen! |
Events
Event naam | Omschrijving |
---|---|
collapse-close Cancelable |
Wordt afgevuurd wanneer de collapse gesloten wordt. Het event bevat de property detail ,
deze bevat een reference naar het collapse__detail element |
collapse-open Cancelable |
Wordt afgevuurd wanneer de collapse geopend wordt. Het event bevat de property detail ,
deze bevat een reference naar het collapse__detail element |
Benodigde stylesheets
/uno/components/hint/hint.css
/uno/components/table/table.css