Smooth Accessible Accordion Plugin In Pure JavaScript – Badger Accordion

Preview:

Description:

Badger Accordion is a simple, performant, accessible JavaScript accordion plugin that uses CSS3 animations for the smooth expand/collapse effects.

How to use it:

Install and import the Badger Accordion into your project.

$ npm install badger-accordion --save

Or you can include the Badger Accordion’s JavaScript and Stylesheet on your web page.

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

The example HTML structure for the accordion.

<dl class="badger-accordion js-badger-accordion">
  <dt>
      <button class="badger-accordion__header js-badger-accordion-header">
          <div class="badger-accordion__header-title">
              Accordion Header
          </div>
          <div class="badger-accordion__header-icon">
          </div>
      </button>
  </dt>
  <dd class="badger-accordion__panel js-badger-accordion-panel">
      <div class="badger-accordion__panel-inner text-module js-badger-accordion-panel-inner">
          <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
      </div>
  </dd>
  <dt>
      <button class="badger-accordion__header js-badger-accordion-header">
          <div class="badger-accordion__header-title">
              Accordion Header
          </div>
          <div class="badger-accordion__header-icon">
          </div>
      </button>
  </dt>
  <dd class="badger-accordion__panel js-badger-accordion-panel">
      <div class="badger-accordion__panel-inner text-module js-badger-accordion-panel-inner">
          <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
          <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
      </div>
  </dd>
</dl>

Create a new Badger Accordion instance and done.

const myAccordion = new BadgerAccordion('.js-badger-accordion');

Default configuration options of the accordion.

const myAccordion = new BadgerAccordion('.js-badger-accordion',{
      headerClass: '.js-badger-accordion-header',
      panelClass: '.js-badger-accordion-panel',
      panelInnerClass: '.js-badger-accordion-panel-inner',
      hiddenClass:  'is-hidden',
      initalisedClass: 'badger-accordion--initalised',
      headerDataAttr: 'data-badger-accordion-header-id',
      openMultiplePanels: false,
      openHeadersOnLoad: [],
      headerOpenLabel: 'Open accordion panel',
      headerCloseLabel: 'Close accordion panel',
      roles: true // Controls setting presentation role on the container element & region on the panel. By using a boolean value you will set both attributes. By settings this as an object you will be explicitly setting only that role. Any roles not included in the object will not be set. In the example above only the region role will be set.
});

API methods.

// gets current state
// Arguments: headerId/s - array
myAccordion.getState()

// opens a specific accordion panel
myAccordion.open(headerIndex)

// closes a specific accordion panel
myAccordion.close(headerIndex)

// toggles accordion panels 
// animationAction is either open or closed.
myAccordion.togglePanel(animationAction, headerIndex)

// opens all accordion panel
myAccordion.openAll()

// closes all accordion panel
myAccordion.closeAll()

// calculates and sets all panels height 
calculateAllPanelsHeight()    

// calculates and sets a single panels height
calculatePanelHeight()

Changelog:

v1.2.0 (2019-02-09)

• Created the ability to have nested accordions.

v1.1.4 (2018-12-08)

• Update & bugfix

v1.1.3 (2018-12-02)

• Update & bugfix

v1.1.2 (2018-08-12)

• Update & bugfix

v1.1.1 (2018-06-17)

• Update & bugfix