A pure ES5 JS CSS accordian
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.bin
dist
.gitignore
LICENSE
README.md
index.html
myAPP.js
package.json
style.css

README.md

Accessible Accordian Class Pure JS / CSS

A pure JS OOP accessible accordion with CSS transitions.

View a demo here: http://benbowes.github.io/Accessible-Accordian-Class-Pure-JS-CSS/


Works in IE10+

Accordian rules:

  • Panels open and close via a click event on a tab heading.
  • Only one panel can be open at a time.
  • All panels can be closed at the same time.
  • Transitions work in IE10+ and modern browsers

Accessibilty:


HTML Layout:

<section class="accordion" role="tablist" aria-multiselectable="true">

    <a class="accordion-panel__heading" href="javascript:;">Accordion Panel One</a>
    <div class="accordion-panel__content">
        ...
    </div>

    <a class="accordion-panel__heading" href="javascript:;">Accordion Panel Two</a>
    <div class="accordion-panel__content">
        ...
    </div>


</section>

Rough HTML translation:

Accordion Container

    AccordionPanel's clickable heading/tab - controls content area
    AccordionPanel's collapsing content area

    AccordionPanel's clickable heading/tab - controls content area
    AccordionPanel's collapsing content area

    ...

Initialisation

myAPP.init = function () {

    // Create Accordian instance. Pass in the classes you want to use for the heading and content panel.
    this.accordionContainer = new myAPP.Accordion({
        heading:    '.accordion-panel__heading',
        content:    '.accordion-panel__content'
    });

    // Select second panel programtically like this
    this.accordionContainer.panels[1].select(); // or myAPP.accordionContainer.panels[0].select();
};

Removing the focus ring

If you'd like to remove the focus ring from the accordian (and whole page), I can provide 2 options. Note that this is considered a bad practice by some accessibilty professionals however note that VoiceOver, NVDA and Chromevox screenreaders add their own focus ring.

A CSS version:

:focus{
  outline: 0;
}

And a keyboard initiated version as stated here: http://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-accessible-manner/

The keyboard version essentially adds the above CSS on mouseclick and removes the CSS on keyup.