Details / Summary Component

Native HTML <details> / <summary> elements styled by preset.css. No JavaScript required for expand/collapse interaction.

Notes

Basic usage

Default (collapsed)

What is details / summary?

Native HTML collapsible elements. Click the header to toggle content.

Default expanded (open)

Terms & Conditions

1. You agree to use this service lawfully.
2. We reserve the right to modify terms.

Disabled

Disabled panel

This panel cannot be expanded.

Content types

Text content

Product description

Built with cutting-edge technology for enterprise applications.

List content

System requirements
  • OS: Windows 10 / macOS 12+ / Linux
  • RAM: 8GB minimum
  • Storage: 500MB free space

Table content

Quarterly sales
QuarterRevenue
Q1$128K
Q2$156K

Nested

Nested details

Project docs

Full documentation structure.

Chapter 1: Overview

Project goals and tech stack.

1.1 Goals
  • Consistent visual style
  • Theme customization
  • Accessibility
Chapter 2: Quick Start

npm install beautify

Grouped (FAQ)

How to reset password?

Click "Forgot password" on the login page.

How to change profile?

Go to "Profile" > "Edit".

How to contact support?

Email: support@example.com

Use cases

FAQ section

Payment methods?

We accept WeChat Pay, Alipay, and major credit cards.

Shipping fee?

Free shipping on orders over $99.

Return policy?

7-day no-questions-asked returns.

Settings panel

Notifications
Security
Appearance

Changelog

v2.5.0 (2026-06-01)

New: Data export, batch operations

v2.4.1 (2026-05-15)

Fix: Login timeout issue

Code snippet

View sample code
function hello() {
  console.log("Hello World");
}