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.

::: demo

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"

::: demo

#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"

::: demo

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

::: demo

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.

::: demo

#collapseCustom

:::

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

Example: Listen To Custom-Events

::: demo

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);