Press "Enter" to skip to content

Accessible Vanilla JS Accordion Using CSS Transition

An accordion can be accessed using a CSS transition to expand and contract. Song statuses are added automatically. This plugin is a fully accessible, seamless animated accordion component that expands and collapses accordion panels using CSS3 transitions.

accessible accordion jquery, accordion javascript, accessible accordion css only, nested accordion accessibility, accordion accessibility wcag

How to make use of it:

1. Install & obtain.

# NPM
$ npm install vanilla-js-accordion --save

2. Import the Accordion.js into the doc.

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

3. Build the HTML to 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 choices.

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

5. The generated HTML markup must 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 strategies.

// 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();

Accessible Accordion With JavaScript And CSS3, accordion Plugin/Github


See Demo And Download

Official Website(TheC2Group): Click Here

This superior jQuery/javascript plugin is developed by TheC2Group. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *