Accessible Accordion With Vanilla JavaScript

Preview:

Description:

An easy, accessible, SEO-friendly accordion component built with JavaScript and definition lists.

How to use it:

1. Include the JavaScript accordion.js and stylesheet accordion.css on the page.

<script src="./accordion.js" defer></script>
<link href="./accordion.css" rel="stylesheet" />

2. Add the CSS class accordion to the definition list.

<dl class="accordion">
  ...
</dl>

3. Add the CSS class accordion-heading to the accordion header links as follows:

<dl class="accordion">
  <dt>
    <a aria-expanded="fasle" href="#"  tabindex="0">
      <div class="accordion-heading">
        Accordion Header Link.
      </div>
    </a>
  </dt>
  <dd tabindex="0">
    <p>Accordion content goes here. <a href="##">A link, because why not.</a></p>
  </dd>
  <dt>
    <a aria-expanded="fasle" href="#"  tabindex="0">
      <div class="accordion-heading">
        Accordion Header Link
      </div>
    </a>
  </dt>
  <dd tabindex="0">
    <p>Accordion content goes here.</p>
  </dd>
  <dt>
    <a aria-expanded="fasle" href="#"  tabindex="0">
      <div class="accordion-heading">
        Accordion Header Link
      </div>
    </a>
  </dt>
  <dd tabindex="0">
    <p>Accordion content goes here.</p>
  </dd>
</dl>

4. Override the default styles of the accordion component.

.accordion > dt {
  border: 1px solid black;
  border-bottom: 0;
  padding: 10px;
  position: relative;
}