Accessible Accordion With JavaScript And CSS3 – Accordion.js

Category: Accordion , Javascript | February 22, 2020
Author: TheC2Group
Views Total: 250 views
Official Page: Go to website
Last Update: February 22, 2020
License: MIT

Preview:

Accessible Accordion With JavaScript And CSS3 – Accordion.js

Description:

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
$ npm install vanilla-js-accordion --save

2. Import the Accordion.js into the document.

<link rel="stylesheet" href="accordion.css" />
<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>
  </div>
  <div class="item" data-status="disabled">
    <div class="target" tabindex="0">Title 2</div>
    <div class="panel">
      Panel 2
    </div>
  </div>
  <div class="item" data-status="disabled">
    <div class="target" tabindex="0">Title 3</div>
    <div class="panel">
      Panel 3
    </div>
  </div>
</div>

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>
  </div>
  <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>
  </div>
  <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
    </div>
  </div>
</div>

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
accordion.activate(index);

// expand an accordion panel
accordion.expand(index);

// collapse an accordion panel
accordion.contract(index);

// collapse all accordion panels
accordion.contractAll(index);

// destroy the accordion instance
accordion.destroy();

You Might Be Interested In:


Leave a Reply