js-accordion

Example

Install

npm i js-accordion --save

In a browser:

<script src="path/js/js-accordion.min.js"></script>
<link href="path/css/js-accordion.min.css" rel="stylesheet">

Load ES module:

import "js-accordion/css/js-accordion.css"; //if is necesary.
import Accordion from 'js-accordion';

Usage

you must import the style in html or script.

html

this structure with your id

<dl id="accordion">
  <dt>Section 1</dt>
  <dd>
    <p>Section 1 Content...</p>
  </dd>
  <dt>Section 2</dt>
  <dd>
    <p>Section 2 Content...</p>
  </dd>
  <dt>Section 3</dt>
  <dd>
    <p>Section 3 Content...</p>
  </dd>
</dl>

Script

import "js-accordion/css/js-accordion.css"; // es6 example
import Accordion from 'js-accordion'

const id = 'accordion'
const accordion = new Accordion(id [, config]) // config is a optional param

API

config

| Attribute | type | default | example | description | | --------- | ---- | ------- | --- | -- | | maxHeight | String | 'none' | "150px" | set max height of accordion content when is opened | | withTransition | Boolean | true | true / false | effect when open and close | withAutoClose | Boolean | true | true / false | close others accordions than you not click | onToggle | Event | () => {} | (accordion) => {} | event when one content of accordion is opened.

variables

• element : Root Accordion element
• config : Accordion config
• accordionItems: Array of Accordion Items, each accordion with heder and content.

functions

• update() : if you add new content, this update the accordion.
• toggleAccordion(accordion): if you want use it in javascript pass a accordion to close or open.

theme

you can change the default theme changing this css variables.

  --accordion-header-fz: 16px;
  --accordion-header-icon-fz: 1.5em;
  --accordion-header-height: 2.2em;
  --accordion-header-padding: 0 1em;
  --accordion-border-width: 1px;
  --accordion-border-radius-width: 0px;
  --accordion-time-transition: 0.4s;
  --accordion-function-transition: ease-in-out;

  --accordion-header-background-color: #f0f0f0;
  --accordion-header-border-color: #444444;
  --accordion-header-text-color: #444444;
  --accordion-body-background-color: white;
  --accordion-body-border-color: #444444;
  --accordion-body-text-color: #444444;

CI

pipeline

| Branches | Stages | site | | ----------- | ---------- | -------------------------------------------------------------- | | Staging |  Staging | heroku | | Master | Production | Github Pages |

Conditions

• [x] Use Sass for generate CSS
• [x] Use ES6
• [x] Use only Vanilla JS, without any JS framework
• [x] Generate gh-page for publish

Bonus

• [x] Add new section with Ajax content

Author

Alex Marcos Gutierrez

License

MIT