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 {
    font-family: "Material Icons";
  }

  details:not([open]) summary::marker {
    content: 'arrow_right' / 'right'; /* Using Google Icons */
  }

  details[open] summary::marker {
    content: 'arrow_drop_down' / 'down'; /* Using Google Icons */
  }

Details Content Styling

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

  details[open]::details-content {
    border: 2px dashed #9f9f9f;
    padding: 0.5rem;
  }