A pure ES5 JS CSS accordian
MIT License
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:
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
...
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();
};
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.