<div class="wrapper">
  <img src="https://uploads-ssl.webflow.com/649c7f9a7739b1da3f52cb29/650ca0f162b5c62b83930c15_Zenyth Assessment_Logo-01.svg" width="200px" alt="Zenyth logo">
    <h1>Accessible Accordion Pattern</h1>
<!-- Include above in all   -->
  <div id="accordionGroup" class="accordion">
  <h2>
    <button type="button" aria-expanded="true" class="accordion-trigger" aria-controls="sect1" id="accordion1id">
      <span class="accordion-title">
        What is Web Accessibility?
        
      </span>
      <span class="accordion-icon" aria-hidden="true"></span>
    </button>
  </h2>
  <div id="sect1" role="region" aria-labelledby="accordion1id" class="accordion-panel">
    <div>
      <!-- Variable content within section, may include any type of markup or interactive widgets. -->
      <p>Web accessibility means that websites, tools, and digital technologies are designed and developed so that people with disabilities can use them.</p>
    </div>
  </div>
  <h2>
    <button type="button" aria-expanded="false" class="accordion-trigger" aria-controls="sect2" id="accordion2id">
      <span class="accordion-title">
        WCAG 2.0 principles        
      </span>
      <span class="accordion-icon" aria-hidden="true"></span>
    </button>
  </h2>
  <div id="sect2" role="region" aria-labelledby="accordion2id" class="accordion-panel" hidden="">
    <div>
      <p>POUR perceivable, operable, understandable, and robust.</p>
    </div>
  </div>
  <h2>
    <button type="button" aria-expanded="false" class="accordion-trigger" aria-controls="sect3" id="accordion3id">
      <span class="accordion-title">
        Types of disabilities
      </span>
      <span class="accordion-icon" aria-hidden="true"></span>
    </button>
  </h2>
  <div id="sect3" role="region" aria-labelledby="accordion3id" class="accordion-panel" hidden="">
    <div>
      <p>All disabilities that affect access to the Web, including:</p>
      <ul>
        <li>Auditory</li>
        <li>Cognitive</li>
        <li>Neurological</li>
        <li>Physical</li>
        <li>Speech</li>
        <li>Visual</li>
      </ul>
    </div>
  </div>
</div>
    
  <p>For more information you can reach a friendly accessibility expert at <a href="https://zenythgroup.com/contact">Zenyth</a></p>
</div>
    
/* Default Codepen Styles */
* {
  font-family: ui-serif, Assistant;
}
.wrapper {
  margin: 0 auto 2.5em;
  max-width: 650px;
}
h1 {
  padding-bottom: 25px;
}
#info {
  margin-top: 60px;
}
*:focus {
  outline-color: #53389e;
  outline-style: auto!important;
  outline-offset: 2px;
}
.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.m-auto {
  margin: auto;
}
.justify-evenly {
  justify-content: space-evenly;
}

/* Include above in all please */
.accordion {
  margin: 0;
  padding: 0;
  border: 2px solid hsl(0deg 0% 52%);
  border-radius: 7px;
  width: 20em;
}

.accordion h2 {
  margin: 0;
  padding: 0;
}

.accordion:focus-within {
  border-color: #6941c6;
}

.accordion > * + * {
  border-top: 1px solid hsl(0deg 0% 52%);
}

.accordion-trigger {
  background: none;
  color: hsl(0deg 0% 13%);
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  padding: 1em 1.5em;
  position: relative;
  text-align: left;
  width: 100%;
  outline: none;
  background-color: #6941c6;
  color: white;
  border: 2px solid whitesmoke;
  letter-spacing: 1.5px;
}

.accordion-trigger:focus-visible,
.accordion-trigger:hover {
  background: white;
  border: 2px solid #6941c6;
  color: #6941c6
}


.accordion > *:first-child .accordion-trigger,
.accordion > *:first-child {
  border-radius: 5px 5px 0 0;
}

.accordion > *:last-child .accordion-trigger,
.accordion > *:last-child {
  border-radius: 0 0 5px 5px;
}

button {
  border-style: none;
}

.accordion button::-moz-focus-inner {
  border: 0;
}

.accordion-title {
  display: block;
  pointer-events: none;
  border: transparent 2px solid;
  border-radius: 5px;
  padding: 0.25em;
  outline: none;
  font-weight: bold;
}

.accordion-icon {
  background-color: currentColor;
  height: 10px;
  width: 16px;
  flex: none;
  clip-path: polygon(0% 0%, 50% 100%, 100% 0%, calc(100% - 2px) 0, 50% calc(100% - 3px), calc(0% + 2px) 0);
}

.accordion-trigger .accordion-icon,
.accordion-trigger:hover .accordion-icon {
  border-color: currentColor;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg)
}

.accordion-panel {
  margin: 0;
  padding: 1em 1.5em;
}

/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
.accordion-panel[hidden] {
  display: none;
}
'use strict';

class Accordion {
  constructor(domNode) {
    this.rootEl = domNode;
    this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');

    const controlsId = this.buttonEl.getAttribute('aria-controls');
    this.contentEl = document.getElementById(controlsId);

    this.open = this.buttonEl.getAttribute('aria-expanded') === 'true';

    // add event listeners
    this.buttonEl.addEventListener('click', this.onButtonClick.bind(this));
  }

  onButtonClick() {
    this.toggle(!this.open);
  }

  toggle(open) {
    // don't do anything if the open state doesn't change
    if (open === this.open) {
      return;
    }

    // update the internal state
    this.open = open;

    // handle DOM updates
    this.buttonEl.setAttribute('aria-expanded', `${open}`);
    if (open) {
      this.contentEl.removeAttribute('hidden');
    } else {
      this.contentEl.setAttribute('hidden', '');
    }
  }

  // Add public open and close methods for convenience
  open() {
    this.toggle(true);
  }

  close() {
    this.toggle(false);
  }
}

// init accordions
const accordions = document.querySelectorAll('.accordion h2');
accordions.forEach((accordionEl) => {
  new Accordion(accordionEl);
});


External CSS

  1. https://fonts.googleapis.com/css?family=Assistant

External JavaScript

This Pen doesn't use any external JavaScript resources.