Collapse

TIP

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.

Link/Button Examples

Listens to "Click"-Event.

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

Toggle Collapsible with this Link

#collapseExample.c-collapse

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

hide code

<div class="h-flex h-space-around">
    <a 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 with this Link
    </a>
    <button class="c-btn -primarylight -small -icon-arrow -icon-down js-collapse" data-target="#collapseExample" data-extra-class="visible-print" role="button" 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

Listens to "Change-Event.

div class="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.

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

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

Display this c-collapse content via JS.

hide code

<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: Custom Trigger Element

TIP

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

#collapseCustom

hide code

<button class="c-btn -secondary" id="custom-trigger" data-target="#collapse-custom" aria-expanded="false" aria-controls="collapse-custom">
div#customTrigger data-target="collapse-custom"
</button>
<div class="c-collapse js-collapse m-t-l" id="collapse-custom">
  <div class="h-highlight-block">
      <p>
        #collapseCustom
      </p>
  </div>
</div>

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

Example: Listen To Custom-Events

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

hide code

<button class="c-btn -primary js-collapse" 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-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);