Collapse

What is the Collapse Module?

TIP

Use the Collapse module to toggle visibility of elements via a trigger element. The module listens to click or change events and can be used with checkboxes, buttons, or links.

INFO

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Usage

Target Element (Collapsible)

• .c-collapse hides content (via CSS), also hidden per default in print (!)
• .c-collapse.-is-visible displays content
• per default c-collapse is set to display: block; when visible, use the modifiers -is-inline, -is-inline-block, -is-flex, -is-table-row or -is-table to change display settings.

Trigger Element

• Add the class .js-collapse to identify the trigger element.
• Use a link or button with a data-target="#targetID" attribute to set the target element (= collapsed element) and set the ARIA-attribute aria-controls="targetID" to the same target ID.
• Set aria-expanded="false" if the target-element is hidden per default, and true if it's already visible.

Toggle Custom Classes

• You can add custom classes via the attribute data-extra-class="custom-class-example": This class will be toggled along with the visibility of the target element.
• For example: if you want the target-element to be hidden in print only if it's closed and visible if open, just add data-extra-class="print-visible-only-if-active"
• If you want the same for the trigger-element, add the attribute data-trigger-extra-class additionally.

Rotating Arrow-Icons

• Up- or Down-Arrow-Icons can be added via the modifiers -icon-arrow -icon-down or -icon-arrow -icon-up and will be rotated on collapsing.

Button Example

WARNING

Use button-tags for interactive elements, not div, span or a-tags.

.c-checkbox.js-collapse

• data-target="#collapseExample"
  
• aria-expanded="false"
  
• data-trigger-extra-class
  
• data-extra-class="hidden-print""
  

Button Examples

Listens to "Click"-Event.

class="js-collapse" data-target="#collapseExample" data-extra-class="hidden-print" data-trigger-extra-class role="button" aria-expanded="false"

INFO

#collapseExample.c-collapse

This element will be hidden in print if closed, and visible in print if open.

Checkbox Example

Listens to "Change-Event.

div class="c-checkbox js-collapse" data-target="#collapseExampleCheckbox" aria-expanded="false/true"

INFO

Unchecked Checkbox Example

Hide this c-collapse panel initially and display when checkbox is checked.

Checked Checkbox Example

Shows this c-collapse panel initially because of the checked checkbox – and display when checkbox is checked.

Settings and API

Default Settings:

    const defaults = {
        selector: {
            collapseTrigger: ".js-collapse"
        },
        class: {
            collapseTrigger: "js-collapse",
            isActive:        "-is-active",
            isVisible:       "-is-visible",
            arrowIcon:       "-icon-arrow",
            isCheckbox:      "c-checkbox"
        },
        attribute: {
            target:            "data-target",
            extraClass:        "data-extra-class",
            triggerExtraClass: "data-trigger-extra-class"
        },
        event: {
            open:   "collapse:open",
            close:  "collapse:close",
            toggle: "collapse:toggle"
        }
    };

TIP

Initialize the Collapse Module with or without custom settings and registers Event-Listeners:
Collapse.init(settings: object);

Registers Event-Listeners:
Collapse.registerEvents();

Opens a specific Collapsed-Div and updates trigger-element (optional):
Collapse.open(trigger: Node, target: Node, extraClass: String, triggerExtraClass: Boolean);
Triggers event collapse:open

Closes any open Collapse-Div and updates trigger-element (optional):
Collapse.close(trigger: Node, target: Node, extraClass: String, triggerExtraClass: Boolean);
Triggers event collapse:close

Toggles the visibility of a Collapse-Dov and updates trigger-element (optional):
Collapse.toggle(trigger: Node, target: Node, extraClass: String, triggerExtraClass: Boolean);
Triggers event collapse:toggle

Example: Toggle Visibility without a Trigger-Element

INFO

Display this c-collapse content via JS.

const collapseDiv = document.getElementById('collapse-js-example');
Collapse.open(null, collapseDiv);

Example: Custom Trigger Element

TIP

Trigger element doesn't have a "js-collapse" class.

INFO

#collapseCustom

const customTrigger = document.getElementById('custom-trigger');
Collapse.toggle(customTrigger);

Example: Listen To Custom-Events

INFO

Change color and text of button to "Close Collapse" when collapse:open is triggered.

const button = document.getElementById('color-button');
const collapse = document.getElementById('color-collapse');

collapse.addEventListener('collapse:open', function (elem) {
    button.textContent = "Close Collapse";
    button.classList.add('-secondary');
}, false);    

collapse.addEventListener('collapse:close', function (elem) {
    button.textContent = "Open Collapse";
    button.classList.remove('-secondary');
}, false);