Collapse

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
Dit is de inhoud van de collapse. Humani generiss sunt dominas de nobilis compater. Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris.
// 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
Dit is de inhoud van de collapse. Humani generiss sunt dominas de nobilis compater. Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris.

collapse zonder achtergrond

Voeg de class collapse--no-background toe aan de collapse om de standaard achtergrond weg te halen.

Titel van collapse
Dit is de inhoud van de collapse. Humani generiss sunt dominas de nobilis compater. Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris.

Versimpelde collapse

Voeg de class collapse--simple toe aan de collapse om een simpelere variant van de collapse te gebruiken.

Titel van collapse
Dit is de inhoud van de collapse. Humani generiss sunt dominas de nobilis compater. Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris.

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.
Titel van collapse
Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris. Humani generiss sunt dominas de nobilis compater.

Als alternatief kan een x-uno-collapse-group op een omliggend element geplaatst worden.

Titel van collapse
Humani generiss sunt dominas de nobilis compater. Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris.
Titel van collapse
Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris. Humani generiss sunt dominas de nobilis compater.

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
Humani generiss sunt dominas de nobilis compater. Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris.

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
Dit is de inhoud van de collapse. Humani generiss sunt dominas de nobilis compater. Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris.
Titel van collapse
Dit is de inhoud van de collapse. Humani generiss sunt dominas de nobilis compater. Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris.
Titel van collapse
Dit is de inhoud van de collapse. Humani generiss sunt dominas de nobilis compater. Cliniass cadunt in audax cirpi! Est placidus urbs, cesaris.

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