Collapse - Wilout UI

Basic Collapse

This content can be collapsed and expanded by clicking the button above.

<button class="ui-btn ui-btn--primary" data-ui-toggle="collapse" data-ui-target="#content">
  Toggle Content
</button>
<div id="content" class="ui-collapse">
  <div class="ui-card ui-mt-3">
    <div class="ui-card__body">
      Hidden content here
    </div>
  </div>
</div>

<button class="ui-btn ui-btn--primary"
        data-ui-toggle="collapse"
        data-ui-target="#content"
        ng-click="onToggle()">
  {{ buttonLabel }}
</button>
<div id="content" class="ui-collapse">
  <div class="ui-card ui-mt-3">
    <div class="ui-card__body">
      {{ content }}
    </div>
  </div>
</div>

<button class="ui-btn ui-btn--primary"
        data-ui-toggle="collapse"
        data-ui-target="#content"
        (click)="onToggle()">
  {{ buttonLabel }}
</button>
<div id="content" class="ui-collapse">
  <div class="ui-card ui-mt-3">
    <div class="ui-card__body">
      {{ content }}
    </div>
  </div>
</div>

<button className="ui-btn ui-btn--primary"
        data-ui-toggle="collapse"
        data-ui-target="#content"
        onClick={handleToggle}>
  {buttonLabel}
</button>
<div id="content" className="ui-collapse">
  <div className="ui-card ui-mt-3">
    <div className="ui-card__body">
      {content}
    </div>
  </div>
</div>

Initially Open

Add the ui-collapse--show class to make the content visible by default.

This content is visible by default (has ui-collapse--show class).

<button data-ui-toggle="collapse" data-ui-target="#content">Toggle</button>
<div id="content" class="ui-collapse ui-collapse--show">
  <!-- Content visible by default -->
</div>

Accordion Example

Use multiple collapse elements to create an accordion.

Content for section 1

Content for section 2

Content for section 3

<div class="ui-card">
  <div class="ui-card__header">
    <button class="ui-btn ui-btn--ghost ui-btn--block" data-ui-toggle="collapse" data-ui-target="#acc1">
      Section 1
    </button>
  </div>
  <div id="acc1" class="ui-collapse ui-collapse--show">
    <div class="ui-card__body">Content for section 1</div>
  </div>
</div>

<div class="ui-card ui-mt-2">
  <div class="ui-card__header">
    <button class="ui-btn ui-btn--ghost ui-btn--block" data-ui-toggle="collapse" data-ui-target="#acc2">
      Section 2
    </button>
  </div>
  <div id="acc2" class="ui-collapse">
    <div class="ui-card__body">Content for section 2</div>
  </div>
</div>

Events

Collapse emits custom events that you can listen to.

Event	Description
`ui:collapse:show`	Fired before showing (cancelable)
`ui:collapse:shown`	Fired after shown
`ui:collapse:hide`	Fired before hiding (cancelable)
`ui:collapse:hidden`	Fired after hidden

document.addEventListener('ui:collapse:shown', (e) => {
  console.log('Collapse shown:', e.target.id);
});

document.addEventListener('ui:collapse:hidden', (e) => {
  console.log('Collapse hidden:', e.target.id);
});

// In your controller
angular.module('app').controller('CollapseCtrl', function($scope, $document) {
  $document[0].addEventListener('ui:collapse:shown', function(e) {
    $scope.$apply(function() {
      console.log('Collapse shown:', e.target.id);
    });
  });

  $document[0].addEventListener('ui:collapse:hidden', function(e) {
    $scope.$apply(function() {
      console.log('Collapse hidden:', e.target.id);
    });
  });
});

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({ ... })
export class CollapseComponent implements OnInit, OnDestroy {
  private shownHandler = (e: Event) => console.log('Collapse shown:', (e.target as Element).id);
  private hiddenHandler = (e: Event) => console.log('Collapse hidden:', (e.target as Element).id);

  ngOnInit() {
    document.addEventListener('ui:collapse:shown', this.shownHandler);
    document.addEventListener('ui:collapse:hidden', this.hiddenHandler);
  }

  ngOnDestroy() {
    document.removeEventListener('ui:collapse:shown', this.shownHandler);
    document.removeEventListener('ui:collapse:hidden', this.hiddenHandler);
  }
}

import { useEffect } from 'react';

function CollapseExample() {
  useEffect(() => {
    const handleShown = (e) => console.log('Collapse shown:', e.target.id);
    const handleHidden = (e) => console.log('Collapse hidden:', e.target.id);

    document.addEventListener('ui:collapse:shown', handleShown);
    document.addEventListener('ui:collapse:hidden', handleHidden);

    return () => {
      document.removeEventListener('ui:collapse:shown', handleShown);
      document.removeEventListener('ui:collapse:hidden', handleHidden);
    };
  }, []);

  return ( /* ... */ );
}

Data Attributes

Attribute	Description
`data-ui-toggle="collapse"`	Marks element as collapse trigger
`data-ui-target="#id"`	Target collapse element selector

CSS Classes Reference

Class	Description
`.ui-collapse`	Base collapse class (hidden by default)
`.ui-collapse--show`	Makes collapse visible
`.ui-collapse--collapsing`	Applied during animation (added by JS)