Description

Data attributes:

• [data-js-step-card]: This is the selector which is looped through to initiate the component via Javascript.
• [data-js-step-card-toggle]: This element in which toggles between the collapsed state of the card on click.
• [data-js-step-card-toshow] (optional when toggling, no animation if not applied): This element is faded out when transitioning between collapsed states, this is swapped with the [data-js-step-card-tohide] when toggling.
• [data-js-step-card-tohide] (optional when toggling, no animation if not applied): This element is faded in when transitioning between collapsed states, this is swapped with the [data-js-step-card-toshow] when toggling.

  Other options:

• toCollapse: If you attach toCollapse as a function on your step DOM element, this will allow you to control when the collapse happens by using the callback provided by the function e.g.:

     document.querySelector([step selector]).toCollapse = (collapseCard) => {
       //do stuff before collapse
       collapseCard();
     }