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