Collapse

The Collapse component is a flexible utility for toggling the visibility of content. It is commonly used for FAQs, reducing page clutter, or organizing information into expandable sections.

• Related: Accordion, Tabs

Basic Example

To create a basic collapse, you need a trigger (button) and a target (the content).

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 type="button"
        class="c-btn -primary-outline -small -dropdown js-collapse"
        data-target="#firstCollapseExample"
        aria-expanded="false"
        aria-controls="collapseExample">Collapse Example</button>
<div class="c-collapse m-t-s" 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>

Implementation Details

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 -dropdown (if it's a c-btn) or -icon-arrow -icon-down and will be rotated on collapsing.

Checkbox Example

This example demonstrates how to use a checkbox as a trigger for the collapse component. The checkbox's state will control the visibility of the target content.

Unchecked Checkbox

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

Preselected Checkbox

Table header	Table header	Table header
Table content	Table content	Table content

Show Code

<div>
    <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</label>
    </div>
    <div class="c-collapse js-collapse m-t-m" id="collapseExampleCheckbox">
      <div class="h-highlight-block m-b-l">
        <p>
          Hide this c-collapse panel initially and display when checkbox is checked.
        </p>
      </div>
    </div>
  <div>
    <div class="c-checkbox js-collapse" data-target="#collapseExampleCheckbox2" aria-expanded="true">
      <input id="i4" type="checkbox" checked>
      <label class="c-label" for="i4">Preselected Checkbox</label>
    </div>
    <div class="c-collapse js-collapse" id="collapseExampleCheckbox2">
      <table class="c-table">
        <thead>
          <tr>
            <th>Table header</th>
            <th>Table header</th>
            <th>Table header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Table content</td>
            <td>Table content</td>
            <td>Table content</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Example: Listen To Custom-Events

This example demonstrates how to synchronize your UI, such as changing button text or styling, by listening for the specific lifecycle events of the collapse component.

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

Show Code

<button class="c-btn -small js-collapse -dropdown" id="color-button" data-target="#color-collapse" aria-expanded="false" aria-controls="color-collapse">
  Open Collapse
</button>
<div class="c-collapse js-collapse m-t-s" 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>

Show JavaScript Code

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

Settings and API

The Collapse Module provides a straightforward API to manage collapsible content programmatically. It handles state toggling, class updates, and dispatches custom events for integration.

---

Initialization & Core Methods

Method	Description
Collapse.init(settings)	Initializes the module. Accepts an optional settings object to override defaults and automatically registers event listeners.
Collapse.registerEvents()	Manually binds event listeners to the DOM. (Called automatically by init).

---

State Management

These methods allow you to control specific collapse elements. Each method dispatches a corresponding event upon execution.

Collapse.open(trigger, target, extraClass, triggerExtraClass)

Opens a specific collapsed container and updates the trigger element.

• Events: Triggers collapse:open

Collapse.close(trigger, target, extraClass, triggerExtraClass)

Closes the target container and updates the trigger element.

• Events: Triggers collapse:close

Collapse.toggle(trigger, target, extraClass, triggerExtraClass)

Toggles the visibility of the target container based on its current state.

• Events: Triggers collapse:toggle

---

Parameters Reference

All state management methods accept the following parameters:

Parameter	Type	Required	Description
trigger	Node	Yes	The element that initiates the action (e.g., a button).
target	Node	Yes	The collapsible element to be manipulated.
extraClass	String	No	A custom CSS class to apply when the element is active.
triggerExtraClass	Boolean	No	Whether to apply the extraClass to the trigger element as well.

TIP

Use the custom events (collapse:open, collapse:close) to hook into the animation lifecycle or to sync state with other UI components.