@three11/accordion

Front-end Accordion widget using max-height

Usage no npm install needed!

<script type="module">
  import three11Accordion from 'https://cdn.skypack.dev/@three11/accordion';
</script>

README

GitHub release GitHub issues GitHub last commit Github file size Build Status npm npm Analytics

Accordion

Front-end accordion widget using max-height written in vanilla ES2017

Install

npm i @three11/accordion

or

yarn add @three11/accordion

or

Just download this repository and link the files located in dist folder:

<link rel="stylesheet" href="path-to-accordion/dist/accordion.css" type="text/css" />

<script src="path-to-accordion/dist/accordion.min.js"></script>

or

Include it from Unpkg CDN

<script src="//unpkg.com/@three11/accordion/dist/accordion.min.js"></script>

Usage

First, import the module:

import Accordion from '@three11/accordion';

Then initialize a new instance of the module:

const el = doc.querySelector('[data-accordion]');
const accordion = new Accordion(el, (settings = {}));

Settings

The default settings are:

{
    headSelector: '[data-title]',   // Selector for the head element
    bodySelector: '[data-content]', // Selector for the body element
    hiddenClass:  'is--hidden',     // Hidden class name
    activeClass:  'is--active'      // Active class name
}

License

GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007