How to Code an Accessible JavaScript Accordion Component

In this tutorial, we’ll be creating an accessible accordion block component using vanilla JavaScript, that allows a user to toggle collapsible content.

JavaScript Accordion Demo

Accordions are a brilliant way of displaying content in all kinds of scenarios. This is what we’ll be building:

1. Creating the Layout (HTML)

Since we’re building a custom component, our focus will be on making it accessible so it can be operated by all users.

This is the HTML for our accordion layout:

  <section id="accordion" class="accordion">
    <div class="accordion-container">
      <div class="accordion-item">
        <button class="accordion-trigger" id="accordion-trigger-1" aria-expanded="false" aria-controls="accordion-content-1">
          <span class="accordion-title">
          </span>
          <span class="accordion-icon">
            &plus;
          </span>
        </button>
        <div class="accordion-content" id="accordion-content-1" role="region" aria-labelledby="accordion-trigger-1">
          <p></p>
        </div>
      </div>
      
      ...
    </div>
  </section>

Making Things Accessible

Let’s take a look at the attributes we use to aid accessibility:

aria-expanded: this attribute is used on collapsible elements to indicate if the element is expanded or not.
aria-controls: this attribute is used on an element that is responsible for displaying the contents of another element. The aria-controls value is the id of the element being controlled.
aria-labelledby: this provides an accessible name to an element.
role: this attribute is used to assign a semantic meaning to an element. For this tutorial, we're assigning our accordion content the role region.

Devtools Accessibility tree of the accordion component showing the aria-labelledby and role values

2. Styling the Content (CSS)

We’ll use CSS to handle the transition timing of the elements we want to animate. In this case, that’s the accordion-content and accordion-icon. We’ll also set the styling for when the accordion-item is active and hide the accordion content by default.

.accordion-icon {
  transition: transform 0.5s;
}

.accordion-item.is-active .accordion-icon {
  transform: rotate(45deg);
}

.accordion-content {
  height: 0;
  overflow: hidden;
  transition: 0.5s;
}

This is the rest of the styling for the layout:

.accordion-container {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  border: 3px solid #e0e0e0;
  border-radius: 24px;
  overflow: hidden;
}

.accordion-item {
  width: 100%;
}

.accordion-trigger {
  width: 100%;
  display: block;
  background-color: rgb(250, 250, 250);
  color: rgb(0, 0, 0);
  padding: 24px;
  font-size: 20px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  text-align: left;
  border: none;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  cursor: pointer;
}

.accordion-item:not(:first-of-type) .accordion-trigger {
  border-top: 3px solid #eaeaea;
}

.accordion-content {
  height: 0;
  overflow: hidden;
  transition: 0.5s;
}

.accordion-content p {
  margin: 24px;
}

One thing to note is that we don’t use any padding or margins on our accordion-content element and instead we only apply a margin to the child element. This is because height:0 doesn’t affect the margins or padding of an element so we would still have visible space if we set any.

3. Handling the Accordion Functionality (JavaScript)

First, we’ll need to get all the accordion items:

1	const accordionItems = document.querySelectorAll(".accordion-item");

Click Event Listener

Next, we’ll define a function on page load to add a click event listener to all the accordion trigger buttons.

window.addEventListener("load", () => {
  accordionItems.forEach((accordion, index) => {
    const accordionTrigger = accordion.querySelector(".accordion-trigger");
    accordionTrigger.addEventListener("click", () => toggleAccordion(index));
  });
});

An Introduction to JavaScript Event Listeners for Web Designers

Anna Monus

25 Jul 2023

Since our .querySelectorAll() method returns a NodeList, we can use the .forEach() method to loop through each accordion item element.

We can then target each trigger button inside a specific accordion item using accordion.querySelector(). Building the component this way makes it more scalable as targeting the trigger or content element isn’t tied down to a specific id or classname and instead is based on the accordion-item container it’s present in.

Our Toggle Function

Now we’ve set up our event listener, we can define our toggleAccordion() function.

First we’ll want to target the current accordion item. It’s possible to do this by using e.target.parentNode but for this demo we’ll use the index instead, which the toggleFunction accepts as a parameter.

1	const toggleAccordion = (index) => {
2	const currentAccordion = accordionItems[index];
3	currentAccordion.classList.toggle("is-active");
4	};

When the accordion trigger is clicked, we’ll toggle the is-active class on the corresponding accordion item.

This function will also handle updating the height of our accordion content and setting the aria-expanded value of the accordion trigger to false.

We’re setting the height in JavaScript to create a transition effect on the accordion content since there’s no way of knowing the exact height of the accordion content in CSS.

This is what our updated toggleAccordion() function looks like:

const toggleAccordion = (index) => {
  resetAccordions(index);

  const currentAccordion = accordionItems[index];
  currentAccordion.classList.toggle("is-active");

  const accordionContent = currentAccordion.querySelector(".accordion-content");
  const accordionTrigger = currentAccordion.querySelector(".accordion-trigger");

  if (currentAccordion.classList.contains("is-active")) {
    accordionContent.style.height = `${accordionContent.scrollHeight}px`;
    accordionTrigger.setAttribute("aria-expanded", "true");
  } else {
    accordionContent.style.height = 0;
    accordionTrigger.setAttribute("aria-expanded", "false");
  }
};

Once we’ve toggled the is-active class on the currentAccordion, we’ll use the presence of the is-active class to determine the aria attributes and styling of the accordion trigger and content.

Pause for Coffee ☕️

At this point, we’ve built most of the accordion component. You deserve a coffee break!

This is what it should look like currently (try clicking on all the triggers):

Including a Reset Function

We can further expand on this build by including a reset function to make sure only one accordion is open at a time. Our reset function will loop through the accordionItems NodeList and remove the active state on each accordion item, except for the current one based on its index.

Let's define the resetAccordions() function:

const resetAccordions = (targetIndex) => {
  accordionItems.forEach((accordion, index) => {
    const accordionContent = accordion.querySelector(".accordion-content");
    const accordionTrigger = accordion.querySelector(".accordion-trigger");

    if (targetIndex != index) {
      accordion.classList.remove("is-active");
      accordionContent.style.height = 0;
      accordionTrigger.setAttribute("aria-expanded", "false");
    }
  });
};

We loop through the accordionItem and target all elements where the item index is not equal to the targetIndex being passed into the resetAccordions() function.

Finally, we can update our toggleAccordion() function to include resetting the accordion block when one accordion item is clicked:

const toggleAccordion = (index) => {
  resetAccordions(index);

  const currentAccordion = accordionItems[index];
  currentAccordion.classList.toggle("is-active");

  const accordionContent = currentAccordion.querySelector(".accordion-content");
  const accordionTrigger = currentAccordion.querySelector(".accordion-trigger");

  if (currentAccordion.classList.contains("is-active")) {
    accordionContent.style.height = `${accordionContent.scrollHeight}px`;
    accordionTrigger.setAttribute("aria-expanded", "true");
  } else {
    accordionContent.style.height = 0;
    accordionTrigger.setAttribute("aria-expanded", "false");
  }
};

Conclusion

And with that, we’ve completely built a JavaScript accordion component! Well done. Let’s remind ourselves of the finished product:

Learn More

Accordions on Desktop: When and How to Use Nielsen Norman Group
Style the summary arrow with SVG alternatives (imperfect technique) Chris Coyier
HTML Element: details