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

<script>
	/* Add to <head> */
	// Remove no-js and add 'js' to the HTML
	document.documentElement.className = document.documentElement.className.replace('no-js', ' ');
	document.documentElement.className += ' js ';
</script>

This component requires a js class to be present on the html element to fully function. If you’re using a script like Modernizr, it will handle this for you. If not, you’ll need to add the above script to the head of the document. Adding it into the head will assure there will be no jumpiness in the UI while the JavaScript and CSS are loading.

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

SCSS Download SCSS

// Variables
$dark-gray: #303030 !default;

// Component Sass
.accordion-header {
	border-bottom: 1px solid $dark-gray;
	cursor: pointer;
	font-size: 2em;
	padding: 10px 0 10px 30px;
	position: relative;
	text-align: left;
	width: 100%;

	&:before {
		content: "+";
		left: 5px;
		position: absolute;
		top: 5px;
	}

	&.is-active {
		&:before {
			content: "-";
		}
	}
}

.js .accordion-content {
	display: none;

	&.is-active {
		border-bottom: 1px solid $dark-gray;
		display: block;
	}
}

JS Usage | Plugin

TenUp.accordion( {
	target: '.accordion', // ID (or class) of accordion container
}, function() {
	console.log( 'Amazing callback function!' );
} );

JavaScript API

TenUp.accordion( { options }, callback );

This is the main method to call the plugin. It currently takes two arguments, an options object and callback function.

options

Currently recognizes the following: target. To request more options, please file an issue.

target : '.accordion'

The target option should contain the ID or class of the accordion wrapper.

callback

Accepts a function that will be executed upon completion.

Browser Compatibility

Feature Chrome Firefox Internet Explorer Safari
Basic Support Latest Latest 10+ 5.1+

Resources