Accessible Accordion With JavaScript And CSS3 – Accordion.js

Views Total:2 views
Official Page:Go to website
Last Update:August 1, 2020


Accessible Accordion With JavaScript And CSS3 – Accordion.js


A fully accessible and smoothly animated accordion component that expands and collapses accordion panels using CSS3 transitions.

The plugin automatically adds accessibility attributes to accordions following the WAI-ARIA practices.

How to use it:

1. Install & download.

$ npm install vanilla-js-accordion --save

2. Import the Accordion.js into the document.

<link rel="stylesheet" href="" />
<script src="accordion.js"></script>

3. Build the HTML for your first accordion.

<div class="Accordion Example">
  <div class="item" data-status="disabled">
    <div class="target" tabindex="0">Title 1</div>
    <div class="panel">
      Panel 1
  <div class="item" data-status="disabled">
    <div class="target" tabindex="0">Title 2</div>
    <div class="panel">
      Panel 2
  <div class="item" data-status="disabled">
    <div class="target" tabindex="0">Title 3</div>
    <div class="panel">
      Panel 3

4. Initialize the accordion with default options.

var accordion = new Accordion('.Example');

5. The generated HTML markup should be like these:

<div class="Accordion Example" role="tablist" aria-multiselectable="true">
  <div class="item" data-status="expanded">
    <div class="target" role="tab" aria-expanded="true" tabindex="0" id="Accordion-1-1">Title 1</div>
    <div class="panel" role="tabpanel" aria-hidden="false" aria-labelledby="Accordion-1-1">
      Panel 1
  <div class="item" data-status="contracted">
    <div class="target" role="tab" aria-expanded="false" tabindex="0" id="Accordion-1-2">Title 2</div>
    <div class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="Accordion-1-2">
      Panel 2
  <div class="item" data-status="contracted">
    <div class="target" role="tab" aria-expanded="false" tabindex="0" id="Accordion-1-3">Title 3</div>
    <div class="panel" role="tabpanel" aria-hidden="true" aria-labelledby="Accordion-1-3">
      Panel 3

6. Override the default settings to customize the accordion.

var accordion = new Accordion('.Example',{

    // default selectors
    item: '.item',
    target: '.target',
    control: '.target',
    panel: '.panel',

    // allows multiple panels to open at a time
    allowMultiple: true,

    // default attribute
    attribute: 'data-status',

    // default values the data-status attribute
    expanded: 'expanded',
    contracted: 'contracted',

    // CSS prefix
    prefix: 'Accordion-',

    // config the CSS transitions here
    transition: 'height .3s',

    // auto set focus to the accordion
    // none, item, panel, target, control, first
    setFocus: 'none',

    // enable URL hash
    hashEnabled: true


7. API methods.

// toggle an accordion panel

// expand an accordion panel

// collapse an accordion panel

// collapse all accordion panels

// destroy the accordion instance


v1.1.2 (08/01/2020)

  • fixing accordion close animation to be smooth

Source link

Add comment


All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.