Native accordion implementation with custom marker styling and ::details-content pseudo-element.

Structure

Semantic disclosure widget using the native <details> and <summary> elements.

<details>
  <summary>
    Summary Title
  </summary>
  Body
</details>

Custom Marker Control

Replace default disclosure triangle with custom content using ::marker pseudo-element.

  details summary::marker {
    content: "- ";
  }

  details[open] summary::marker {
    content: "+ ";
  }

Details Content Styling

Apply styles directly to expanded content using the ::details-content pseudo-element.

  details[open]::details-content {
    border: 5px dashed hotpink;
    padding: 0.5rem;
  }

Icon Rotation

Rotate chevron icons based on [open] state for visual feedback.

  details[open] .icon-chevron-right {
    rotate: 90deg;
  }