← All Examples

Accordion / FAQ

Expandable content panels using the <details> and <summary> elements.

Published May 19, 2026

Demo

What is Pure CSS?

Pure CSS refers to techniques that achieve interactive UI patterns using only CSS — no JavaScript required.

Which browsers are supported?

All modern browsers support the features used in these examples. Check caniuse.com for specific properties.

Can I use these in production?

Yes! These are real CSS techniques used in production sites. Always consider accessibility requirements for your use case.

HTML
				
				<details>
  <summary>Question here?</summary>
  <div class="accordion-body">Answer here.</div>
</details>

			

CSS
				
				details {
  border: 1px solid #e2e2e8;
  border-radius: 8px;
  margin-bottom: .5rem;
}

summary {
  padding: .9rem 1.1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

summary::after {
  content: "+";
  transition: transform .25s;
}

details[open] summary::after {
  transform: rotate(45deg);
}

.accordion-body {
  padding: 1rem 1.1rem;
  border-top: 1px solid #e2e2e8;
}

			

How it works

The <details> element has built-in open/closed state managed by the browser. The open attribute is added/removed natively — no JavaScript. CSS targets details[open] to style the expanded state and animates the + icon with a rotate transform.