<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">
</head>
<body>
<h1>Accessible Accordion</h1>
<!-- Accordion 1 -->
<section class="accordion" role="tablist" aria-live="polite" data-behavior="accordion">
<article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
<span id="tab1" tabindex="0" class="accordion__title" aria-controls="panel1" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
<h5>Use the tab key to navigate...</h5>
</span>
<div id="panel1" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab1" data-binding="expand-accordion-container">
<div class="accordion__content-inner">
<p>You can cycle through all the different accordion items through tabbing.</p>
</div>
</div>
</article>
<article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
<span id="tab2" tabindex="0" class="accordion__title" aria-controls="panel2" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
<h5>Or, you can use your mouse.</h5>
</span>
<div id="panel2" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab2" data-binding="expand-accordion-container">
<div class="accordion__content-inner">
<p>This accordion can be used by both mouse and keyboard-only users.</p>
</div>
</div>
</article>
<article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
<span id="tab3" tabindex="0" class="accordion__title" aria-controls="panel3" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
<h5>Click here to view more</h5>
</span>
<div id="panel3" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab3" data-binding="expand-accordion-container">
<div class="accordion__content-inner">
<p>You can also use either the space bar or enter key to expand/collapse these panels.</p>
</div>
</div>
</article>
<article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
<span id="tab4" tabindex="0" class="accordion__title" aria-controls="panel4" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
<h5>ARIA</h5>
</span>
<div id="panel4" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab4" data-binding="expand-accordion-container">
<div class="accordion__content-inner">
<p>This accordion makes use of ARIA tags which help aid accessibility.</p>
</div>
</div>
</article>
</section>
<!-- Accordion 2 -->
<section class="accordion" role="tablist" aria-live="polite" data-behavior="accordion">
<article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
<span id="tab5" tabindex="0" class="accordion__title" aria-controls="panel5" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
<h5>Heading 1</h5>
</span>
<div id="panel5" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab5" data-binding="expand-accordion-container">
<div class="accordion__content-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
</article>
<article class="accordion__item js-show-item-default" data-binding="expand-accordion-item">
<span id="tab6" tabindex="0" class="accordion__title" aria-controls="panel6" role="tab" aria-selected="false" aria-expanded="false" data-binding="expand-accordion-trigger">
<h5>Heading 2</h5>
</span>
<div id="panel6" class="accordion__content" role="tabpanel" aria-hidden="true" aria-labelledby="tab6" data-binding="expand-accordion-container">
<div class="accordion__content-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
</article>
</section>
</body>
</html>body {
background-color: #F6F7EB;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-family: 'Lobster Two', cursive;
text-align: center;
margin-top: 30px;
font-size: 50px;
color: #2b3a40;
}
.accordion {
background-color: #fefffa;
max-width: 600px;
margin: 50px auto;
border-top: 6px solid #44BBA4;
line-height: 1.6;
box-shadow: 5px 5px 10px 0px #a4bac1;
&__item {
border-bottom: 1px solid #dce7eb;
}
&__title {
padding: 15px 15px 15px 40px;
display: block;
position: relative;
font-weight: 400;
&:before {
font-family: FontAwesome;
content: "\f055";
font-size: 20px;
position: absolute;
left: 15px;
top: 12px;
color: #44BBA4;
}
h5 {
border-bottom: 1px solid #fefffa;
display:inline-block;
}
&:hover,
&:focus {
cursor: pointer;
outline: none;
h5 {
border-bottom-color: #a8bdc4;
display:inline-block;
}
}
.is-expanded & {
&:before {
content: "\f056";
}
}
}
&__content-inner {
padding: 0 40px 10px 40px;
}
&__content {
transition: height 0.3s ease-out;
height: 0;
overflow: hidden;
}
}var accordion = $('body').find('[data-behavior="accordion"]');
var expandedClass = 'is-expanded';
$.each(accordion, function () { // loop through all accordions on the page
var accordionItems = $(this).find('[data-binding="expand-accordion-item"]');
$.each(accordionItems, function () { // loop through all accordion items of each accordion
var $this = $(this);
var triggerBtn = $this.find('[data-binding="expand-accordion-trigger"]');
var setHeight = function (nV) {
// set height of inner content for smooth animation
var innerContent = nV.find('.accordion__content-inner')[0],
maxHeight = $(innerContent).outerHeight(),
content = nV.find('.accordion__content')[0];
if (!content.style.height || content.style.height === '0px') {
$(content).css('height', maxHeight);
} else {
$(content).css('height', '0px');
}
};
var toggleClasses = function (event) {
var clickedItem = event.currentTarget;
var currentItem = $(clickedItem).parent();
var clickedContent = $(currentItem).find('.accordion__content')
$(currentItem).toggleClass(expandedClass);
setHeight(currentItem);
if ($(currentItem).hasClass('is-expanded')) {
$(clickedItem).attr('aria-selected', 'true');
$(clickedItem).attr('aria-expanded', 'true');
$(clickedContent).attr('aria-hidden', 'false');
} else {
$(clickedItem).attr('aria-selected', 'false');
$(clickedItem).attr('aria-expanded', 'false');
$(clickedContent).attr('aria-hidden', 'true');
}
}
triggerBtn.on('click', event, function (e) {
e.preventDefault();
toggleClasses(event);
});
// open tabs if the spacebar or enter button is clicked whilst they are in focus
$(triggerBtn).on('keydown', event, function (e) {
if (e.keyCode === 13 || e.keyCode === 32) {
e.preventDefault();
toggleClasses(event);
}
});
});
});
External CSS
This Pen doesn't use any external CSS resources.