Basic Accessible Accordion Component In Vanilla JS – Van11y

This is the Vanilla JavaScript version of the jQuery Accessible Accordion Aria plugin to implement a configurable, WAI-ARIA compliant accordion component in plain JavaScript.

How to use it:

1. Load the necessary JavaScript file in the document.

<script src="./dist/van11y-accessible-accordion-aria.min.js"></script>

2. Initialize the accordion by adding the CSS class ‘js-accordion’ to the parent container.

• data-accordion-prefix-classes: prefix CSS class

<div class="js-accordion" data-accordion-prefix-classes="custom">
  <h2 class="js-accordion__header">Accordion 1</h2>
  <div class="js-accordion__panel">
    <p>Accortion 1 Content</p>
  </div>
  <h2 class="js-accordion__header">Accordion 2</h2>
  <div class="js-accordion__panel">
    <p>Accortion 2 Content</p>
  </div>
  <h2 class="js-accordion__header">Accordion 3</h2>
  <div class="js-accordion__panel">
    <p>Accortion 3 Content</p>
  </div>
  ...
 </div>

3. Apply your own CSS styles to the accordion.

[data-accordion-prefix-classes="custom-css"] {
  margin-left: 3em;
}
.custom-accordion__header,
.custom-noanim-accordion__header,
.custom-css-accordion__header {
  display: block;
  background: none;
  border: 0;
  /** fix typo inputs **/
  font-family: inherit;
  cursor: pointer;
  font-size: 1.5em;
  line-height: 1.8462;
  margin: 0;
  padding: .25em 0;
  text-align: left;
  width: 100%;
  font-weight: normal;
  color: #148297;
}
.custom-css-accordion__header {
  font-size: 1.5em;
}
.custom-accordion__header:focus,
.custom-noanim-accordion__header:focus,
.custom-css-accordion__header:focus {
  outline: 1px dotted;
}
.custom-accordion__header::before,
.custom-noanim-accordion__header::before,
.custom-css-accordion__header::before {
  content: '';
  display: inline-block;
  width: .75em;
  height: .75em;
  background-image: url(https://van11y.net/layout/images/icon-arrow-green_20180126.svg);
  background-repeat: no-repeat;
  background-position: 0 100%;
  margin-right: .25em;
  transform: rotate(0deg);
}
.custom-css-accordion__header::before {
  background-size: 90%;
  width: .7em;
  height: .7em;
  -webkit-transition: transform .25s ease;
  transition: transform .25s ease;
}
[aria-expanded="true"].custom-accordion__header::before,
[aria-expanded="true"].custom-noanim-accordion__header::before,
[aria-expanded="true"].custom-css-accordion__header::before {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}
.custom-accordion__header[aria-selected="true"]::after,
.custom-noanim-accordion__header[aria-selected="true"]::after,
.custom-css-accordion__header[aria-selected="true"]::after {
  content: "";
  position: relative;
  border-bottom: .4em solid transparent;
  border-top: .4em solid transparent;
  margin-left: .5em;
  top: .1em;
  border-left: .7em solid;
  display: inline-block;
  speak: none;
}
/*.custom-accordion__title,
.custom-noanim-accordion__title,
.custom-css-accordion__title {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}*/
.custom-accordion__panel {
  display: block;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: visibility 0s ease, max-height 1s ease, opacity 1s ease;
  transition: visibility 0s ease, max-height 1s ease, opacity 1s ease;
  max-height: 100em;
  /* magic number for max-height = enough height */
  visibility: visible;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  margin: 0;
  padding: 0;
}

/* This is the hidden state */
[aria-hidden=true].custom-accordion__panel {
  display: block;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition-delay: 1s, 0s, 0s;
  transition-delay: 1s, 0s, 0s;
  margin: 0;
  padding: 0;
}
.custom-css-accordion__panel {
  display: block;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: visibility 0s ease, max-height 1s ease, transform 1s ease, opacity 1s ease;
  transition: visibility 0s ease, max-height 1s ease, transform 1s ease, opacity 1s ease;
  transform: scaleY(1);
  max-height: 40em;
  /* magic number for max-height = enough height */
  visibility: visible;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  margin: 0;
  padding: 0;
}

/* This is the hidden state */
[aria-hidden=true].custom-css-accordion__panel {
  display: block;
  opacity: 0;
  transform: scaleY(0);
  max-height: 0;
  visibility: hidden;
  -webkit-transition-delay: 1s, 0s, 0s, 0s;
  transition-delay: 1s, 0s, 0s, 0s;
  margin: 0;
  padding: 0;
}
.custom-noanim-accordion__panel {
  display: block;
}
[aria-hidden=true].custom-noanim-accordion__panel {
  display: none;
}

4. You can also initialize the accordion in the JavaScript as follows:

var myAccordion = van11yAccessibleAccordionAria({
    // configs here
});
myAccordion.attach();

5. More data attribute to config the accordion.

• data-accordion-multiselectable: Determine whether to open multiple panels at once
• data-accordion-cool-selectors: Activate a less strict mode if your site requires some div between js-accordion and js-accordion__header
• data-accordion-opened: Open this accordion on page load

<div class="js-accordion" 
     data-accordion-prefix-classes="custom"
     data-accordion-multiselectable="none"
     data-accordion-cool-selectors="1">
     <h2 class="js-accordion__header" data-accordion-opened="true">Accordion 1</h2>
  ...
</div>