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.

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

Show Code

<button
        class="c-btn -primary-outline -small -icon-arrow -icon-down js-collapse"
        data-target="#firstCollapseExample"
        type="button"
        aria-expanded="false"
        aria-controls="collapseExample"
>
    Collapse Example
</button>
<div class="c-collapse m-t-l" id="firstCollapseExample">
    <div class="h-highlight-block">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    </div>
</div>

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="visible-print"
• 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""

#collapseExample.c-collapse

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

Show Code

<div class="h-flex h-space-around">
  <button
    type="button"
    class="c-link -icon-arrow -icon-down m-r-l js-collapse"
    data-target="#collapseExample"
    data-extra-class="visible-print"
    data-trigger-extra-class role="button"
    aria-expanded="false"
    aria-controls="collapseExample"
  >
    Toggle Collapsible here
  </button>
  <button
    type="button"
    class="c-btn -primarylight -small -icon-arrow -icon-down js-collapse"
    data-target="#collapseExample"
    data-extra-class="visible-print"
    aria-expanded="false"
    aria-controls="collapseExample"
  >
    .. or with this Button
  </button>
</div>
<div class="c-collapse m-t-l" id="collapseExample">
  <div class="h-highlight-block">
    <h3>
      #collapseExample.c-collapse
    </h3>
    <p>This element will be hidden in print if closed, and visible in print if open.</p>
  </div>
</div>

Checkbox Example

TIP

Listens to "change-event" instead of "click".

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

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.

Show Code

<div class="h-flex h-flex-row h-space-between">
  <div class="m-r-l">
    <div class="c-checkbox js-collapse" data-target="#collapseExampleCheckbox" aria-expanded="false">
      <input id="i3" type="checkbox">
      <label class="c-label" for="i3">Unchecked Checkbox Example</label>
    </div>
    <div class="c-collapse js-collapse m-t-l" id="collapseExampleCheckbox">
      <div class="h-highlight-block">
        <p>
          Hide this c-collapse panel initially and display when checkbox is checked.
        </p>
      </div>
    </div>
  </div>
  <div class="m-l-l">
    <div class="c-checkbox js-collapse" data-target="#collapseExampleCheckbox2" aria-expanded="true">
      <input id="i4" type="checkbox" checked>
      <label class="c-label" for="i4">Checked Checkbox Example</label>
    </div>
    <div class="c-collapse js-collapse m-t-l -is-table" id="collapseExampleCheckbox2">
      <div class="h-highlight-block">
        <p>
          Shows this c-collapse panel initially because of the checked checkbox – and display when checkbox is checked.
        </p>
      </div>
    </div>
  </div>
</div>

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"
  }
};

Methods

• Initializes 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 1: Toggle Visibility without Trigger-Element

Display this c-collapse content via JS.

<div class="c-collapse js-collapse m-t-l" id="collapse-js-example">
  <div class="h-highlight-block">
    <p>
      Display this c-collapse content via JS.
    </p>
  </div>
</div>

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

Example 2: Custom Trigger Element

When a trigger element doesn't have a "js-collapse" class, you can use the Collapse.toggle() method to toggle the visibility of a collapse element.

id="collapse-custom"

<button
  class="c-btn -secondary"
  id="custom-trigger"
  data-target="#collapse-custom"
  aria-expanded="false"
  aria-controls="collapse-custom"
  type="button"
>
  custom trigger
</button>

<div class="c-collapse js-collapse m-t-l" id="collapse-custom">
  <div class="h-highlight-block">
    <p>
      id="collapse-custom"
    </p>
  </div>
</div>

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

Example 3: Listen To Custom-Events

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

<button
  class="c-btn -primary js-collapse"
  id="color-button"
  data-target="#color-collapse"
  aria-expanded="false"
  aria-controls="color-collapse"
  type="button"
>
  Open Collapse
</button>
<div class="c-collapse js-collapse m-t-l" id="color-collapse">
  <div class="h-highlight-block">
    <p>
      Change color and text of button to "Close Collapse" when <code>collapse:open</code> is triggered.
    </p>
  </div>
</div>

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