Accordion

Accordion

🖥️Example

JavaScript

On the click of the button you need to change

• button¹ aria-expanded -boolean attribute
• div² remove or add hidden-attribute

VanillaJS queryselectors

• ¹‘[data-accordion=”accordion-content-id”] [aria-expanded]’
• ²‘[id=”accordion-content-id”]’

<div class="accordion" data-accordion="accordion-content-id">
  <h2> 
    <button aria-controls="accordion-content-id" aria-expanded="false">Title</button>
  </h2>
  <div class="accordion__content" id="accordion-content-id" hidden>
    <p>Hideable content.</p>
  </div>
</div>

.accordion [aria-controls] {
  display: inline-block;
  text-decoration: none;
  background: transparent;
  color: #000;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #000;
}
.accordion [aria-controls]:focus {
  /* Focus styles */
}