Badger Accordion

An accessible light weight, vanilla JavaScript accordion with an extensible API. Just 8.17kb Gzipped (2.49kb).

Badgers are short-legged omnivores in the family Mustelidae, which also includes otters, polecats, weasels and wolverines. They belong to the caniform suborder of carnivoran mammals.

Badgers are thought to have got their name because of the white mark – or badge – on their head, although there are other theories.

Another old name for badgers is ‘brock’, meaning grey. You can often see the word brock in street names. Brock is also the name of a character in the Pokemon TV series!

Badgers are fast – they can run up to 30km per hour (nearly 20 mph) for short periods.

Honey badgers can reach 2.4 feet in length and weigh between 19 and 26 pounds. They have bushy tail that is usually 12 inches long.

Honey badger has incredible thick skin that cannot be pierced with arrows, spears or even machete. Skin is also very loose, which is useful in the case of attack. When predator grabs a badger, animal rotates in its skin and turns toward predator's face to fight back (attacking its eyes).

Honey badger has very sharp teeth. They can easily break tortoise shell.

Although badgers are a solitary animal the young Hog Badger tends to be quite playful and social. I would be careful playing with any animal that has extremely large claws. Remember folks, it is all fun and games until someone loses an eye.

Hog Badgers are omnivores and they feed on a variety of things from honey and fruit to insects and small mammals.

A young / baby of a hog badger is called a 'kit'. The females are called 'sow' and males 'boar'. A hog badger group is called a 'cete, colony, set or company'.


Thanks for checking out Badger Accordion! I hope it's easy to use and useful for your website. If you think of a useful feature update/spot a mistake in the docs/want to ask a question please get in touch: If you find a bug please raise an issue on the Github and use the issue template. For info about Badger Accordion follow me on Twitter.


The idea

  • To make an accessible, animated, accordion with an extensible API.
  • Make it using just plain vanilla JavaScript.
  • Ensure that it has just plain simple css. Enough to get it to work. Not too much that you have to spend ages overwriting it.
  • Ensure that it is accessible as possible.

Key terminologies

  • panel - The section of the accordion than opens and closes
  • header - The button that opens an accordion panel

Basic setup

You can download the plugin using a package manager or direct download from Github

You'll need to import the plugin and create a new instance so you can use it. There is a working example in the example directory (shock horror!) if you'd like something to reference.

  1. Create your markup
  2. Include the basic styles (which are in dist/badger-accordion.css or dist/badger-accordion.css)
  3. Import badger-accordion.js
  4. Create new instance of the accordion

I'd recommend also importing the Array.from pollyfill so that your accordion will work for IE9+. The pollyfill only adds 0.93kb (0.34kb gzipped).

import pollyfill from 'array-from-pollyfill';
import BadgerAccordion from 'badger-accordion';

// Creating a new instance of the accordion
const accordion = new BadgerAccordion('.js-badger-accordion');

Next you'll want to create your markup. This is the minimum markup you will need for your accordion. You can use any html elements you would like but you will need to follow the nesting in the example below. I have included the selector badger-accordion__panel that is just for targeting the panels styles. I feel it is best to use separate selectors for targeting an element with JavaScript and CSS. Feel free to create your own selectors all JavaScript selectors are overwrite able using the plugins options.

<dl class="js-badger-accordion">
        <button class="js-badger-accordion-header">
            Header Content
    <dd class="badger-accordion__panel js-badger-accordion-panel">
        <div class="js-badger-accordion-panel-inner">
            Panel Content


I have created some simple CSS styles to help you with creating an accordion which are in dist/badger-accordion-demo.css or dist/badger-accordion-demo.scss. If you'd like some additional styles checkout the example dir.


The accordion has a selection of options that you can overwrite. For example if you wanted to open the first and 4th panel when the accordion is initalised;

new BadgerAccordion('.js-badger-accordion', {
    openHeadersOnLoad: [0, 3]
Option Type Default Description
headerClass String .js-badger-accordion-header Class for panel's header
panelClass String .js-badger-accordion-panel Class for panel
panelInnerClass String .js-badger-accordion-panel-inner Class for panel inner container
hidenClass @Deprecated @Deprecated This was a spelling mistake and has been deprecated. If you have used a version < 1.0.29 then `hiddenClass` is now equal to `hidenClass` so your accordion shouldn't brake.
hiddenClass String -ba-is-hidden Class added to panels that are hidden
initalisedClass String badger-accordion--initalised Class add to accordion when it has initalised
headerDataAttr String data-badger-accordion-header-id Data attribute on each header
openMultiplePanels Boolean false Give you the ability to have mutiple panels open at one time. By default this is disabled
headerOpenLabel String Accordion open button Value for header's aria-label when button is closed
headerCloseLabel String Accordion close button Value for header's aria-label when button is open


The accordion has a series of methods allowing you to have full control over extending the plugin. For example if you wanted to close all your accordion's panels;

Method Arguments Description Example
getState() headerId/s - array Returns the state of a panel/s by passing in the node item index/s as an array. Getting a single Id. accordion.getState([0]). <br> Getting multiple header's state accordion.getState([0, 1, 2])
open() headerIndex Opens a given panel using its headerIndex. Eg; 0 );
close() headerIndex Closes a given panel using its headerIndex. Eg; accordion.close( 0 );
togglePanel() animationAction, headerIndex Toggles panel into opening or closing. animationAction is either open or closed.
openAll() Opens all accordion panels
closeAll() Closes all accordion panels


A massive thanks to BrowserStack for supporting me by allowing me to use their platform for free. BrowserStack is a cloud based testing tool that lets you test websites on a wide range web browsers and real mobiles devices. This removes all the hassle of installing chunky VM's. BrowserStack has some great tools such as automated testing, testing local sites (via a browser extension) and taking screenshots.
BrowserStack logo


I've had some awesome people help me out building the accordion. I worked in part on this while working at Mr B & Friends big shout out to the digital team there. This wouldn't be anywhere near as good if it wasn't for the wise words of Dave Smith. Finally my favourite digital designer Taavi Kelle who gave my demo styles some love <sup>Steve Richardson™</sup>.


  • General performance & naming review
  • Create some mixins to help making custom themes quicker & easier
  • Create option for callback methods on each public method
  • Export an IE9 safe version in the repo
  • Create horizontal accordion option