JavaScript API

Programmatic API

The JS API that framework wrappers abstract over. Use AnimatedDetails for individual elements and DetailsGroup for accordion behavior.

AnimatedDetails
Manual initialization with custom options, plus .open(), .close(), .toggle() methods.
Programmatically controlled disclosure

This disclosure was initialized manually with new AnimatedDetails(el, { duration: 500, easing: 'ease-out' }). Use the buttons below to control it.

Console
new AnimatedDetails(el, { duration: 500, easing: 'ease-out' })
Initialization Patterns
Different ways to initialize disclosures.
// Auto-init all [data-animated] and [data-disclosure-group]
Disclosures.autoInit();

// Manual init with defaults
var ad = new Disclosures.AnimatedDetails(el);

// Manual init with custom options
var ad = new Disclosures.AnimatedDetails(el, {
  duration: 500,
  easing: 'ease-out',
  contentSelector: '.disclosure__content'
});

// Methods
ad.open();
ad.close();
ad.toggle();
ad.destroy();
DetailsGroup
Programmatic accordion control with .openByIndex(), .closeAll(), .destroy().
Group Item 1

Content for the first group item.

Group Item 2

Content for the second group item.

Group Item 3

Content for the third group item.

Console
new DetailsGroup(container, { exclusive: true })
DetailsGroup API
// Functional style — returns cleanup function
var cleanup = Disclosures.initDetailsGroup(container, {
  exclusive: true
});
cleanup(); // remove listeners

// Class style — more control
var group = new Disclosures.DetailsGroup(container, {
  exclusive: true
});
group.openByIndex(0);
group.closeAll();
group.destroy();