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.

// 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

collapse zonder achtergrond

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

Versimpelde collapse

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

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’.

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

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.

Collapse met plus

Voorbeeld van een collapse met een plus en min. Het voorbeeld staat zo ingesteld dat de collapse standaard ‘gesloten’ is.

collapsable tabel

Binnen een tabel kunnen ook collapses zitten. Gebruik als target de tr. On Internet Explorer wordt geen animatie getoond.

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

Events

Benodigde stylesheets

• /uno/components/hint/hint.css
• /uno/components/table/table.css