How to use the details and summary elements for an accordion in HTML5?

Yes, HTML5's <details> and <summary> elements can create accessible folded panels without JavaScript; 1. <details> contains expandable/collapsed content, <summary> as the title; 2. The default content is hidden, click <summary> to switch display; 3. Use the open attribute to expand by default; 4. Multiple <details> can form an accordion menu, supporting multiple openings; 5. You can customize styles through CSS, such as hiding the default arrows, adding icons and borders; 6. Native semantics and supports keyboard navigation, without additional ARIA attributes; 7. If you need a single opening effect, you need to add JavaScript to listen to toggle events and close other panels, thereby realizing the function of expanding only one panel.

The <details></details> and <summary></summary> elements in HTML5 provide a native way to create an according-style widget without JavaScript. They're semantic, accessible, and easy to use.

How <details></details> and <summary></summary> Work

The <details></details> element acts as a container for content that can be shown or hidden. The <summary></summary> element is used inside <details></details> and serves as the clickable label or header that toggles the visibility of the content.

By default, the content inside <details></details> is hidden. When a user clicks the <summary></summary> , the content expands or collapses.

Basic Syntax

 <details>
  <summary>Click to expand</summary>
  <p>This is the hidden content that appears when expanded.</p>
</details>

• The <summary> is required for <details> to function properly.
• Any content can go inside <details> after the <summary> .
• Only one <summary> is allowed per <details> .

Creating a Multi-Item Accordion

You can stack multiple <details> elements to create a full according. Each item behaves independently.

 <details>
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>

<details>
  <summary>Section 2</summary>
  <p>Content for section 2.</p>
</details>

<details>
  <summary>Section 3</summary>
  <p>Content for section 3.</p>
</details>

This creates an according where each section can be opened or closed individually. Unlike some JavaScript-based according toons, multiple items can be open at once — which is often desirable.

Open by Default

To make a section expanded when the page loads, use the open attribute:

 <details open>
  <summary>Section 1 (Open by default)</summary>
  <p>This content is visible right away.</p>
</details>

Styling the Accordion with CSS

You can style <details> and <summary> to match your design.

Remove Default Arrow (Triangle)

The <summary> usually shows a default triangle (disclosure widget). You can hide it and add a custom one:

 summary {
  list-style: none; /* Removes default arrow */
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none; /* For Chrome/Safari */
}

summary::marker {
  content: ''; /* For Firefox */
}

Add Custom Icon

Use CSS to add a plus/minus or chevron:

 summary::after {
  content: " ";
  float: right;
}

details[open] summary::after {
  content: "−";
}

Add Spacing and Borders

Make it looks like a proper according:

 details {
  border: 1px solid #ddd;
  margin-bottom: -1px;
  border-radius: 4px;
}

summary {
  padding: 10px;
  background-color: #f7f7f7;
  font-weight: bold;
  list-style: none;
}

details > *:not(summary) {
  padding: 10px;
  margin: 0;
}

Accessibility and Semantics

• <details> and <summary> are natively accessible . Screen readers understand the toggle behavior.
• No need for role , aria-expanded , or tabindex — the browser handles it.
• Keyboard navigation works: users can press Enter or Space to toggle.

Limitations

• No built-in single-open-panel behavior : All panels can be open at once. If you need “only one open at a time,” you'll need a small amount of JavaScript.
• Stylening limitations : The disclosure triangle can be tricky to style consistently across browsers.

Optional: JavaScript for Single Open Panel

If you want only one section open at a time (like a traditional according), use a little JavaScript:

 <details open class="accordion-item">
  <summary>Section 1</summary>
  <p>Content 1</p>
</details>

<details class="accordion-item">
  <summary>Section 2</summary>
  <p>Content 2</p>
</details>

 document.querySelectorAll('details.accordion-item').forEach(item => {
  item.addEventListener('toggle', () => {
    if (item.open) {
      document.querySelectorAll('details.accordion-item').forEach(other => {
        if (other !== item) other.open = false;
      });
    }
  });
});

This listens for the toggle event and closes other items when one opens.

Basically, <details></details> and <summary></summary> give you a solid, accessible according to zero JavaScript needed — and a small enhancement can make it behave like a single-open according to if required.

The above is the detailed content of How to use the details and summary elements for an accordion in HTML5?. For more information, please follow other related articles on the PHP Chinese website!