HtmlHow-ToBeginner · 4 min read

How to Create Accordion in HTML: Simple Steps and Example

You can create an accordion in HTML using the <details> and <summary> tags, which allow sections to expand and collapse. Each <details> element acts as a container for content that can be toggled by clicking the <summary> heading.

📐

Syntax

The basic syntax for an accordion uses the <details> tag to wrap the collapsible content and the <summary> tag as the clickable heading. When the user clicks the summary, the details content toggles visibility.

<details>: Container that can be opened or closed.
<summary>: The visible heading that toggles the details.
Content inside <details> but outside <summary> is shown or hidden.

html

<details>
  <summary>Section Title</summary>
  <p>This is the hidden content that shows when expanded.</p>
</details>

Output

A clickable heading labeled 'Section Title' that expands to show the paragraph below when clicked.

💻

Example

This example shows a simple accordion with three sections. Each section can be expanded or collapsed independently by clicking its heading.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Accordion Example</title>
  <style>
    details {
      margin-bottom: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 0.5rem;
      background-color: #f9f9f9;
    }
    summary {
      font-weight: bold;
      cursor: pointer;
      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.2s ease;
    }
    details[open] summary::before {
      transform: rotate(90deg); /* down-pointing arrow */
    }
  </style>
</head>
<body>
  <h1>FAQ Accordion</h1>
  <details>
    <summary>What is an accordion?</summary>
    <p>An accordion is a UI element that expands and collapses to show or hide content.</p>
  </details>
  <details>
    <summary>How do I create one in HTML?</summary>
    <p>Use the <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> tags to create collapsible sections.</p>
  </details>
  <details>
    <summary>Is it accessible?</summary>
    <p>Yes, these tags are built-in accessible elements supported by browsers.</p>
  </details>
</body>
</html>

Output

A webpage titled 'FAQ Accordion' with three clickable headings that expand to show their content when clicked, each with a small arrow that rotates on open.

⚠️

Common Pitfalls

Not using <summary> inside <details> causes the toggle to not work.
Using JavaScript to create accordions when <details> and <summary> provide native support is unnecessary.
Forcing multiple sections to open at once requires extra scripting; by default, each <details> toggles independently.
Styling the default marker requires CSS tricks; some browsers show default arrows that may need hiding for custom icons.

html

<!-- Wrong: Missing summary tag -->
<details>
  <p>This content will always be visible because no summary toggles it.</p>
</details>

<!-- Right: Include summary -->
<details>
  <summary>Click to toggle</summary>
  <p>This content is hidden until toggled.</p>
</details>

Output

First block shows content always visible without toggle. Second block shows a clickable heading that toggles content visibility.

📊

Quick Reference

Remember these key points when creating an accordion in HTML:

Use <details> to wrap collapsible content.
Use <summary> as the clickable heading inside <details>.
Content inside <details> but outside <summary> is hidden or shown.
Style with CSS for better visuals and accessibility.
Test in different browsers to ensure consistent behavior.

✅

Key Takeaways

Use

and

tags to create accessible, native accordions in HTML.

Each

section toggles independently without extra JavaScript.

Always include a

tag inside

for proper toggle behavior.

Style the accordion with CSS for better user experience and visual cues.

Test your accordion in multiple browsers to ensure consistent functionality.