@mkoelewijn/collapsable

Collapsable

Collapsable is a lightweight and flexible plugin that will let you create collapsable content. Use it for FAQ's, More information toggles or any way you see fit. A jQuery dependency is currently required. A native JS solution will be added in the near future.

Installation

Want to use npm?

npm install @mkoelewijn/collapsable

Want to use yarn?

yarn add @mkoelewijn/collapsable

Usage

HTML

<div data-collapsable>
  <div data-collapsable-trigger>Collapsable title</div>
  <div data-collapsable-target>Collapsable content</div>
</div>

CSS

// Use the the file in the module
@use '@mkoelewijn/collapsable/dist/index';

// Or define your own
[data-collapsable-target] {
    display: none;
}

Javascript

const node = document.querySelector('[data-collapsable]');
new Collapsable(node, {

  // Optional callbacks
  openStart: (instance) => {}
  closeStart: (instance) => {}
  
});

Options

	type	Default	Arguments
Speed	Integer	500
openStart	Function		instance
closeStart	Function		instance