accordion

An accessible accordion component to help structure large amounts of content on a page

The most important thing to remember when implementing this accordion is that the trigger (the element you click to open a drawer) needs to be a focusable element. In this case, we’re using a button and applying all the ARIA attributes with JavaScript. If JavaScript isn’t enabled, each drawer will be in its natural open state.

Examples

Usage

<div class="accordion">
  <button class="accordion-header" type="button">Accordion Header.</button>
  <div class="accordion-content">
    <h2 class="accordion-label">Accordion Heading</h2>
    <p>here the content of 1st tab <a href="#">link</a></p>
  </div> <!-- /.accordion-content -->

  <button class="accordion-header" type="button">Accordion Header</button>
  <div class="accordion-content">
    <h2 class="accordion-label">Accordion Heading</h2>
    <p>here the content of 2nd tab <a href="#">link</a></p>
  </div> <!-- /.accordion-content -->
</div> <!-- /.accordion -->

					
<div class="accordion">
  <button class="accordion-header" type="button">
    <?php esc_html_e( 'Accordion Header', 'tenup' ); ?>
  </button>
  <div class="accordion-content">
    <h2 class="accordion-label">
      <?php esc_html_e( 'Accordion Heading', 'tenup' ); ?>
    </h2>
    <p><?php esc_html_e( 'here the content of 1st tab', 'tenup' ); ?></p>
  </div> <!-- /.accordion-content -->

  <button class="accordion-header" type="button">
    <?php esc_html_e( 'Accordion Header', 'tenup' ); ?>
  </button>
  <div class="accordion-content">
    <h2 class="accordion-label">
      <?php esc_html_e( 'Accordion Heading', 'tenup' ); ?>
    </h2>
    <p><?php esc_html_e( 'here the content of 2nd tab', 'tenup' ); ?></p>
  </div> <!-- /.accordion-content -->
</div> <!-- /.accordion -->

					
@import '@10up/component-accordion';

						
import Accordion from '@10up/component-accordion';

new Accordion( '.accordion', {
  onCreate: function() { /* callback content */ },
  onOpen: function( { link, content, heading } ) { /* callback content */ },
  onClose: function( { link, content, heading } ) { /* callback content */ },
  onToggle: function( { link, content, heading } ) { /* callback content */ }
} );

						
let accordionInstance = new TenUp.accordion( '.accordion', {
  onCreate: function() { /* callback content */ },
  onOpen: function() { /* callback content */ },
  onClose: function() { /* callback content */ },
  onToggle: function() { /* callback content */ }
} );

* Standalone JS is used on projects that are not set up to handle ES6. To use this version you will need to download the UMD bundle the NPM and pull it into your project. The same process should be followed with the CSS if it cannot process through the NPM package.

Since version 1.1, the component supports nested accordions. The markup remains the same.

Documentation

Installation

This component accepts two arguments, the selector for the accordion container and an object containing optional callbacks.

npm install @10up/component-accordion --save

Options

List of APIs for this component
onCreate Called after the accordion is initialized on page load
onOpen options.Called when an accordion item is opened
onClose Called when an accordion item is closed
onToggle Called when an accordion item is toggled

Methods

List of avaliable methods
destroy() Destroys the component, removing event listeners and any extra markup and attributes.

Classes

List of Classes used for this component
.accordion Wrapping class for the component.
.accordion-header Accordion item trigger element.
.accordion-content Wrapping class for the accordion content.
.accordion-label Label for an accordion section.

Browser Compatibility

List of Browser Support for this component
Chrome Latest
Firefox Latest
Edge Latest
Safari Latest
IE 11

Resources