Struct Details 

pub struct Details;

The <details> element - represents a disclosure widget from which the user can obtain additional information.

Purpose

The <details> element creates a disclosure widget that users can open and close to reveal or hide additional content. Provides built-in interactive functionality without JavaScript. The first child should be a <summary> element that serves as the toggle label.

Content Categories

• Flow Content
• Interactive Content
• Palpable Content

Permitted Content Model

• One <summary> element (as first child)
• Followed by flow content

Common Use Cases

• FAQ (Frequently Asked Questions) sections
• Accordion-style content
• Progressive disclosure of information
• Collapsible content sections
• Show/hide additional details

Key Attributes

• open: Makes the details visible by default

Example

<!-- Basic details element -->
<details>
  <summary>Click to expand</summary>
  <p>This is the hidden content that appears when you click the summary.</p>
</details>

<!-- FAQ item -->
<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language for creating web pages.</p>
</details>

<!-- Details open by default -->
<details open>
  <summary>Important Information</summary>
  <p>This section is expanded by default because of the 'open' attribute.</p>
</details>

<!-- Multiple details forming an accordion -->
<details>
  <summary>Section 1: Introduction</summary>
  <p>This is the introduction section with detailed information.</p>
</details>
<details>
  <summary>Section 2: Features</summary>
  <ul>
    <li>Feature A</li>
    <li>Feature B</li>
    <li>Feature C</li>
  </ul>
</details>
<details>
  <summary>Section 3: Conclusion</summary>
  <p>Final thoughts and summary.</p>
</details>

<!-- Details with rich content -->
<details>
  <summary>View shipping options</summary>
  <table>
    <thead>
      <tr>
        <th>Method</th>
        <th>Time</th>
        <th>Cost</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Standard</td>
        <td>5-7 days</td>
        <td>$5.99</td>
      </tr>
      <tr>
        <td>Express</td>
        <td>2-3 days</td>
        <td>$12.99</td>
      </tr>
    </tbody>
  </table>
</details>

<!-- Nested details -->
<details>
  <summary>Chapter 1</summary>
  <p>Chapter introduction...</p>
  <details>
    <summary>Section 1.1</summary>
    <p>Detailed content for section 1.1</p>
  </details>
  <details>
    <summary>Section 1.2</summary>
    <p>Detailed content for section 1.2</p>
  </details>
</details>

Accessibility

• Keyboard accessible by default (Space/Enter to toggle)
• Screen readers announce the collapsed/expanded state
• Use descriptive summary text
• Ensure content within is properly structured
• Consider adding visual indicators for state
• Works without JavaScript

WHATWG Specification

• 4.11.1 The details element

Trait Implementations

impl HtmlElement for Details

const TAG: &'static str = "details"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl CanContain<Summary> for Details

impl<T: FlowContent> CanContain<T> for Details

impl FlowContent for Details

impl InteractiveContent for Details

impl PalpableContent for Details