Expanded

Component is open.

html

<details class="exp-el" style="--accent:#A8E6C1;" open>
  <summary class="exp-el__summary">Order details</summary>
  <p class="exp-el__body">2× Ceramic mug, 1× Saucer set — shipped 12 August.</p>
</details>
<p class="exp-el__hint">Open is the real expanded state, matched here with the <code>open</code> attribute — click the summary to close it yourself.</p>
<style>
.exp-el { width: 300px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143025; border-radius: 10px; padding: 4px 16px; }
.exp-el__summary { list-style: none; cursor: pointer; padding: 13px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.exp-el__summary::-webkit-details-marker { display: none; }
.exp-el__summary::after { content: "▸"; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
.exp-el__summary::after { transition: transform .15s; }
}
.exp-el[open] .exp-el__summary::after { transform: rotate(90deg); display: inline-block; }
.exp-el__body { margin: 0 0 14px; font-size: 13px; color: #241430cc; }
.exp-el__hint { width: 300px; box-sizing: border-box; margin: 8px 0 0; font-size: 11px; color: #241430888; }
.exp-el__hint code { background: #24143012; padding: 1px 5px; border-radius: 4px; }
</style>

tailwind

<details open class="w-[300px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143025] rounded-[10px] px-4 py-1 [&_summary::-webkit-details-marker]:hidden">
  <summary class="list-none cursor-pointer py-3.5 font-bold flex justify-between items-center">
    Order details
    <span aria-hidden="true" style="color:#A8E6C1">▾</span>
  </summary>
  <p class="m-0 mb-3.5 text-[13px] text-[#241430]/80">2× Ceramic mug, 1× Saucer set — shipped 12 August.</p>
</details>
<p class="w-[300px] box-border mt-2 text-[11px] text-[#241430]/55">Open is the real expanded state, matched here with the <code class="bg-[#24143012] px-1.5 py-0.5 rounded">open</code> attribute — click the summary to close it yourself.</p>

react

import { useState } from "react";

export function ExpandedState({
  summaryText = "Order details",
  body = "2× Ceramic mug, 1× Saucer set — shipped 12 August.",
  accent = "#A8E6C1",
  force = true,
}) {
  const [open, setOpen] = useState(force);
  return (
    <div>
      <details open={open} onToggle={(e) => setOpen(e.target.open)}
        style={{ width: 300, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143025", borderRadius: 10, padding: "4px 16px" }}>
        <summary style={{ listStyle: "none", cursor: "pointer", padding: "13px 0", fontWeight: 700, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          {summaryText}
          <span aria-hidden="true" style={{ color: accent, display: "inline-block", transform: open ? "rotate(90deg)" : "none" }}>▸</span>
        </summary>
        <p style={{ margin: "0 0 14px", fontSize: 13, color: "#241430cc" }}>{body}</p>
      </details>
      <p style={{ width: 300, margin: "8px 0 0", fontSize: 11, color: "#241430888" }}>Open is the real expanded state, matched with the real <code>open</code> attribute — click the summary to close it, or pass <code>force</code> false.</p>
    </div>
  );
}