Events

Events will be dispatched at different points when an expanding and collapsing folds within the toggle group. Event parameters will include the toggled fold and this scope will pass in the Relapse instance.

import relapse from 'relapse';

const event = relapse('.selector');

event.on('focus', function (fold) {});     // toggle button has been focused.
event.on('toggle', function (fold) {});    // toggle button has been clicked
event.on('expand', function (fold) {});    // fold has been opened
event.on('collapse', function (fold) {});  // fold has been closed
event.on('destroy', function (fold) {});   // relapse instance has been destroyed.

Example

Expand and Collapse the folds in the below collapsible accordion.

Cyan Fold

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Pink Fold

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Ac tortor dignissim convallis aenean et tortor at risus.

Purple Fold

Commodo sed egestas egestas fringilla phasellus faucibus. Eu tincidunt tortor aliquam nulla facilisi cras fermentum. Nullam eget felis eget nunc lobortis mattis. Et netus et malesuada fames ac turpis egestas maecenas. Vitae turpis massa sed elementum tempus egestas.

Green Fold

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin. Ac tortor dignissim convallis aenean et tortor at risus. Nec feugiat nisl pretium fusce id velit ut.