Progressive Disclosure

Reveal complexity only when needed.

html

<div class="pd" style="--accent:#E8A020;">
  <h3 class="pd__heading">Share settings</h3>
  <details class="pd__details" open>
    <summary class="pd__summary">Sharing options</summary>
    <div class="pd__content" data-level="basic">
      <p class="pd__basic">Standard sharing: view or edit access.</p>
      <p class="pd__advanced">Advanced: set link expiry and domain restrictions.</p>
      <p class="pd__expert">Expert: enforce SSO and audit every access event.</p>
    </div>
  </details>
</div>
<style>
.pd { font: 13.5px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 320px; width: 320px; padding: 16px; border-radius: 12px; box-sizing: border-box; }
.pd__heading { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.pd__details { background: #fff; border-radius: 10px; padding: 10px 12px; border: 1px solid #24143020; }
.pd__summary { cursor: pointer; font-weight: 700; color: var(--accent); }
.pd__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pd__content p { display: none; margin: 8px 0 0; }
.pd__content .pd__basic { display: block; }
.pd__content[data-level="advanced"] .pd__advanced,
.pd__content[data-level="expert"] .pd__advanced,
.pd__content[data-level="expert"] .pd__expert { display: block; }
</style>

tailwind

<div class="pd-tw font-sans text-[13.5px] text-[#241430] bg-[#FAF7F2] max-w-[320px] w-[320px] p-4 rounded-xl box-border" style="--accent:#E8A020">
  <h3 class="m-0 mb-2.5 text-[15px] font-bold">Share settings</h3>
  <details class="bg-white rounded-[10px] py-2.5 px-3 border border-[#24143020]" open>
    <summary class="cursor-pointer font-bold" style="color:#E8A020">Sharing options</summary>
    <div class="pd-tw__content" data-level="basic">
      <p class="pd-tw__basic mt-2 mb-0">Standard sharing: view or edit access.</p>
      <p class="pd-tw__advanced mt-2 mb-0">Advanced: set link expiry and domain restrictions.</p>
      <p class="pd-tw__expert mt-2 mb-0">Expert: enforce SSO and audit every access event.</p>
    </div>
  </details>
</div>
<style>
.pd-tw__advanced, .pd-tw__expert { display: none; }
.pd-tw__content[data-level="advanced"] .pd-tw__advanced,
.pd-tw__content[data-level="expert"] .pd-tw__advanced,
.pd-tw__content[data-level="expert"] .pd-tw__expert { display: block; }
</style>

react

export function ProgressiveDisclosure({
  heading = "Share settings",
  summaryText = "Sharing options",
  accent = "#E8A020",
  defaultOpen = true,
  detailLevel = "basic",
}) {
  const showAdvanced = detailLevel === "advanced" || detailLevel === "expert";
  const showExpert = detailLevel === "expert";
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 13.5, color: "#241430", background: "#FAF7F2", maxWidth: 320, width: 320, padding: 16, borderRadius: 12, boxSizing: "border-box" }}>
      <h3 style={{ margin: "0 0 10px", fontSize: 15, fontWeight: 700 }}>{heading}</h3>
      <details open={defaultOpen} style={{ background: "#fff", borderRadius: 10, padding: "10px 12px", border: "1px solid #24143020" }}>
        <summary style={{ cursor: "pointer", fontWeight: 700, color: accent }}>{summaryText}</summary>
        <p style={{ margin: "8px 0 0" }}>Standard sharing: view or edit access.</p>
        {showAdvanced && <p style={{ margin: "8px 0 0" }}>Advanced: set link expiry and domain restrictions.</p>}
        {showExpert && <p style={{ margin: "8px 0 0" }}>Expert: enforce SSO and audit every access event.</p>}
      </details>
    </div>
  );
}