How to Build an Accordion in an Interview

How to Build an Accordion in an Interview

The accordion is a common machine coding question. Here is how to build it with smooth animation.

Requirements

• Multiple sections, each with a header and content.
• Click a header to expand/collapse its content.
• Only one section open at a time (or allow multiple).
• Smooth animation.
• Accessible (keyboard, ARIA).

Plan (5 minutes)

1. HTML: a list of sections (header + content).
2. State: which section is open.
3. Events: click header to toggle.
4. CSS: max-height transition for smooth animation.

Build Core (40 minutes)

HTML

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header" onclick="toggle(0)">Section 1</div>
    <div class="accordion-content">Content for section 1</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header" onclick="toggle(1)">Section 2</div>
    <div class="accordion-content">Content for section 2</div>
  </div>
</div>

JavaScript

let openIndex = -1;
const headers = document.querySelectorAll(".accordion-header");
const contents = document.querySelectorAll(".accordion-content");

function toggle(index) {
  if (openIndex === index) {
    contents[index].style.maxHeight = null;
    openIndex = -1;
  } else {
    if (openIndex >= 0) contents[openIndex].style.maxHeight = null;
    contents[index].style.maxHeight = contents[index].scrollHeight + "px";
    openIndex = index;
  }
}

CSS

.accordion-header {
  background: #f0f0f0; padding: 12px; cursor: pointer;
  border: 1px solid #ddd; font-weight: bold;
}
.accordion-content {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 12px; border: 1px solid #ddd; border-top: none;
}
``
### Edge Cases (20 minutes)

- Allow multiple open at once (remove the close-others logic).
- Keyboard navigation (tab to header, enter to toggle).
- ARIA attributes (`aria-expanded`, `aria-controls`).
- Very long content (scroll within the content).

### Accessibility

```js
headers.forEach((header, index) => {
  header.setAttribute("role", "button");
  header.setAttribute("tabindex", "0");
  header.setAttribute("aria-expanded", "false");
  header.addEventListener("keydown", (e) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      toggle(index);
    }
  });
});

The Takeaway

Build the accordion: HTML (headers + content sections), JavaScript (toggle, close others when one opens), CSS (max-height transition for smooth animation). Handle edge cases (multiple open, keyboard, ARIA). The max-height transition is key for smooth animation without knowing the content height.