Concertina.js NPM

Concertina.js

An accessible, lightweight and modern javascript accordion with no dependencies and extensive api.

How to install

Using yarn

yarn add concertina.js

Using npm

npm install concertina.js

How to use

Sample Code

HTML

<ul class="c-concertina">
    <li class="c-concertina__panel">
        <a id="panel-1" href="#" class="c-concertina__header" role="tab">
            <h2 class="c-concertina__title">Panel Title 1</h2>
            <div class="c-concertina__icon"></div>
        </a>
        <div class="c-concertina__content" role="tabpanel">
            <div class="c-concertina__content-inner">
                ...content
            </div>
        </div>
    </li>

    <li class="c-concertina__panel">
        <a id="panel-2" href="#" class="c-concertina__header" role="tab">
            <h2 class="c-concertina__title">Panel Title 2</h2>
            <div class="c-concertina__icon"></div>
        </a>
        <div class="c-concertina__content" role="tabpanel">
            <div class="c-concertina__content-inner">
                ...content
            </div>
        </div>
    </li>
</ul>

Note: All the html classes are customizable however the structure of markup needs to be as below for the accordion to work

-- Accordion Wrapper
  -- Panel
     -- Panel Header
     -- Panel Content
        -- Panel Content Inner
  -- Panel
     -- Panel Header
     -- Panel Content
        -- Panel Content Inner

Javascript

import Concertina from 'concertina.js';

new Concertina({
    element: '.c-concertina'
});

By default this code will grab the first element matching css selector. alertnatively you can pass a dom node as the wrapper element

new Concertina({
    element: document.getElementById('wrapper-id')
});

If you would like to create multiple accordions on the same page you can write it like:

let accordions = document.querySelectorAll('.c-concertina');

accordions.forEach((accordion) => {
    new Concertina({
        element: accordion
    });
});

CSS

you can grab the default css from node_modules/concertina.js/lib/conretina.min.css

Hash Urls

By default Concertina.js reads the page URL hash (#) and opens the relative panel after page load. to use this feature each accordion panel header needs to be an <a> tag with a unique id. The href will be dynamically generated from this id.

example:

If you got this URL:

http://example.com/concertina#panel-2

Concertina.js will look for the panel with id #panel-2 and open it after the page is loaded. To turn off this feature use the option hashUrl: false

Options

Conertina.js has a number of options that can be customized upon construction.

Name	Type	Default	description
element	String / Obj	`'.c-concertina'`	accordion wrapper (selector/DOM node)
transitionClass	String	`c-concertina--has-transition`	transition class
panelClass	String	`c-concertina__panel`	panel class
activePanelClass	String	`c-concertina__panel--is-active`	active panel class
headerClass	String	`c-concertina__header`	panel header class
contentClass	String	`c-concertina__content`	panel content class
contentCanvasClass	String	`c-concertina__content-canvas`	panel content inner class
hashUrl	boolean	`true`	enable hash url update and load
scrollToPanelOnClick	String	'mobile'	scroll to top of panel after transition. (usefull for mobile) other option as `'all'` to enable for all devices
transition	boolean	`true`	enables animation when accordion is closed and opened
closeOthers	boolean	`true`	close other panels when one panel is clicked

API Methods

Concertina.js has a provides a simple api for you to control the plugin. these includes a series of methods.

let conc = new Concertina({
    element: document.getElementById('wrapper-id')
});

conc.openAll();

Methods	Args	Description
getPanelsState()		returns an array of all panels and their currentState (open/close)
close()	panelIndex	close a panel using its index
open()	panelIndex	open a panel using its index
closeAll()		close all panels
openAll()		open all panels
recalculateHeights()		recalculates the height of all panels. This method is very useful if you are populating the panel content using ajax or waiting for images to load. simply call this method on your callbacks