Accordion

Accordion header 1

Accordion panel 1

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Accordion header 2

Accordion panel 2

Mauris rhoncus commodo sapien, eu porttitor libero gravida at. Maecenas a dapibus lorem. Suspendisse fermentum neque ligula, et dapibus libero volutpat scelerisque. Cras vitae enim interdum, fringilla sapien quis, posuere purus. Morbi dictum arcu sapien, eget malesuada lorem ultricies non. Etiam tellus neque, dapibus ac rutrum ut, mollis vel nibh.

Accordion header 3

Accordion panel 3

Quisque facilisis fermentum ex, in iaculis felis porta et. Phasellus sapien neque, sagittis vitae erat vitae, consequat vulputate lacus. Donec sit amet mattis ipsum. Ut metus ipsum, consectetur tincidunt imperdiet sed, consequat sed urna. Morbi id feugiat magna. Nunc ut aliquet quam. Morbi auctor sapien quam. Cras lorem neque, imperdiet ut mollis non, cursus scelerisque augue.

Accordion

View sources

Accordions leverage a lot of similar conventions to tab interfaces, in that they progressively disclose portions of content to the user.

Accordion components themselves can be considered tablists, and declared so on their parent container. Depending on whether multiple or single panels can be expanded at one time, we can set the container’s aria-multiselectable attribute to true or false.

To effectively progressively enhance sections of content into an accordion widget, we can start out with pairs of headings and content containers. As headings themselves aren’t interactive and can’t receive focus, we have the option of programatically nesting a button element within them, or managing focus and roles ourselves. This component chooses to do the latter using tabindex and aria-controls attributes, with the help of common ids on headers and panels. The script that supports the interactions, should also manage header aria-selected and aria-expanded states.

Panels that are inactive can be hidden using tabindex="-1" and aria-hidden="true". This ensures only the active content is focusable at any given time.

Arrow keys can be used to navigate between header items, and Spacebar or Enter keypresses will toggle active tabpanels. If aria-multiselectable="false" is set, then sibling panels should close and be hidden appropriately.

There is more work to do on this particular component to manage alternative keybindings (Home, End, PageUp/Down), as per the WAI-ARIA spec.

Install

Fraccordion is available to install with npm. Run with the --save flag to add the component your project dependencies.

npm install fr-accordion --save

The component will then be available to import.

import Fraccordion from 'fr-accordion';

Functional styles for the accordion (accordion.css) that are required to display the component states correctly should be referenced via a <link> in the <head> of your document, or can be integrated into your existing stylesheet.

You can read more about installing Frend components on our About page, including details on the functional CSS and JavaScript structure.

Usage

Accordions rely on header and panel pairs, wrapped in a single container.

<div class="fr-accordion js-fr-accordion">
	<h2 id="accordion-header-1" class="fr-accordion__header js-fr-accordion__header">...</h2>
	<div id="accordion-panel-1" class="fr-accordion__panel js-fr-accordion__panel">
		...
	</div>
	<h2 id="accordion-header-2" class="fr-accordion__header js-fr-accordion__header">...</h2>
	<div id="accordion-panel-2" class="fr-accordion__panel js-fr-accordion__panel">
		...
	</div>
	<h2 id="accordion-header-3" class="fr-accordion__header js-fr-accordion__header">...</h2>
	<div id="accordion-panel-3" class="fr-accordion__panel js-fr-accordion__panel">
		...
	</div>
</div>

Assign the function invocation to a variable.

var myAccordion = Fraccordion();

Methods

// remove all bindings and attributes when no longer needed
myAccordion.destroy();

// re-initialise as needed
myAccordion.init();

Options

var myAccordion = Fraccordion({
	// String - Outer container selector, hook for JS init() method
	selector: '.js-fr-accordion',

	// String - Accordion header elements converted to focusable, togglable elements
	headerSelector: '.js-fr-accordion__header',

	// String - Use header id on element to tie each accordion panel to its header - see panelIdPrefix
	headerIdPrefix: 'accordion-header',

	// String - Accordion panel elements to expand/collapse
	panelSelector: '.js-fr-accordion__panel',

	// String - Use panel id on element to tie each accordion header to its panel - see headerIdPrefix
	panelIdPrefix: 'accordion-panel',

	// Boolean - If set to false, all accordion panels will be closed on init()
	firstPanelsOpenByDefault: true,

	// Boolean - If set to false, each accordion instance will only allow a single panel to be open at a time
	multiselectable: true,

	// String - Class name that will be added to the selector when the component has been initialised
	readyClass: 'fr-accordion--is-ready',
	
	// Integer - Duration (in milliseconds) of CSS transition when opening/closing accordion panels
	transitionLength: 250
});

Browser support

Frend components rely on common JavaScript APIs like classList, and ES5 methods like forEach. Each component tests for support of these before initialising. They will be fully functional in:

  • Chrome 8+
  • Firefox 3.6+
  • Safari 5.1+
  • Opera 15+
  • Edge 12+
  • IE 10+
  • iOS Safari 5.1+
  • Android Browser 3+

Browsers that haven’t cut the mustard here will render the initial HTML to be styled up as necessary.