Skip to content

WordPress Component Library
10up Engineering

Accordion

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.

HTML View Generated HTML

			<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 -->

			
			<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 -->

	<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 3rd 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 4th tab <a href="#">link</a></p>
	</div> <!-- //.accordion-content -->

</div> <!-- //.accordion -->

			

PostCSS Download PostCSS

@import url("./dist/accordion.css");

JavaScript Plugin

NPM

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

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

accordion( '.accordion', {
	onCreate: function() {
		console.log( 'onCreate callback' );
	},
	onOpen: function() {
		console.log( 'onOpen callback' );
	},
	onClose: function() {
		console.log( 'onClose callback' );
	},
	onToggle: function() {
		console.log( 'onToggle callback' );
	}
} );

Standalone

Clone this repo and import accordion.js and accordion.css from the dist/ directory.

let myAccordion = new TenUp.accordion( '.accordion', {
	onCreate: function() {
		console.log( 'onCreate callback' );
	},
	onOpen: function() {
		console.log( 'onOpen callback' );
	},
	onClose: function() {
		console.log( 'onClose callback' );
	},
	onToggle: function() {
		console.log( 'onToggle callback' );
	}
} );

API

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

Callbacks

Browser Compatibility

Feature Chrome Firefox Internet Explorer Edge Safari
Basic Support Latest Latest 11 [* Standalone only] Latest Latest

* IE11 does not currently support ES6 @import.

Resources