How to Create Accordion in CSS: Simple Steps and Example

You can create an accordion in CSS by using the details and summary elements, which provide built-in toggle functionality. Style these elements with CSS to control the appearance and transitions for a smooth accordion effect.

Syntax

The basic structure uses the <details> element to hold the content and the <summary> element as the clickable header. When the user clicks the summary, the details expand or collapse automatically.

• <details>: Container that can be open or closed.
• <summary>: The visible header that toggles the details.
• CSS styles control the look and feel.

html

<details>
  <summary>Section Title</summary>
  <p>Hidden content shown when expanded.</p>
</details>

Output

A clickable header labeled 'Section Title' that expands to show 'Hidden content shown when expanded.' when clicked.

Example

This example shows a styled accordion with multiple sections. Clicking each header toggles its content smoothly without JavaScript.

html

html {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  padding: 1rem;
}

details {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
}

details[open] {
  background-color: #e0f7fa;
}

summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none;
  outline: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '\25B6'; /* right-pointing arrow */
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.3s ease;
}

details[open] summary::before {
  transform: rotate(90deg); /* arrow points down when open */
}

<!-- HTML content -->
<p>Click each section to expand or collapse.</p>

<details>
  <summary>Section 1</summary>
  <p>This is the content of section 1.</p>
</details>

<details>
  <summary>Section 2</summary>
  <p>This is the content of section 2.</p>
</details>

<details>
  <summary>Section 3</summary>
  <p>This is the content of section 3.</p>
</details>

Output

Three accordion sections labeled 'Section 1', 'Section 2', and 'Section 3'. Clicking each expands or collapses its content with a rotating arrow icon.

Common Pitfalls

Common mistakes when creating CSS accordions include:

• Not using <summary> inside <details>, which breaks toggle behavior.
• Relying on JavaScript for simple toggling when CSS details can do it natively.
• Forgetting to hide the default marker and add a custom arrow for better style.
• Not styling the summary to show it is clickable (cursor pointer).

html

<!-- Wrong: Missing summary -->
<details>
  <p>Content without a summary will not toggle.</p>
</details>

<!-- Right: Include summary -->
<details>
  <summary>Click me</summary>
  <p>Content toggles correctly.</p>
</details>

Output

First details block shows content always visible with no toggle. Second details block toggles content when clicking 'Click me'.

Quick Reference

Tips for creating CSS accordions:

• Use <details> and <summary> for native toggle.
• Style summary with cursor: pointer and custom markers.
• Use details[open] selector to style expanded state.
• Keep content inside details for accessibility and keyboard support.

Key Takeaways

Use

and

elements for a simple, accessible accordion without JavaScript.

Style the

element to indicate it is clickable and customize the arrow icon.

Use the CSS selector details[open] to style the expanded accordion state.

Always include a

inside

to enable toggle functionality.

Keep your accordion content semantic and accessible for keyboard users.