49Accordion

Native

— open state, keyboard toggle and find-in-page expansion come from the platform. A button+div rebuild loses Ctrl+F reaching collapsed content, which on a docs site is a real loss.

Use it for

FAQs, curriculum sections, progressive disclosure

Not for

Content everyone needs — just show it

Flush

No outer box, rules only — for a FAQ inside prose, where a boxed accordion reads as a widget dropped into the article.

Do I need a developer org?

Yes, and it is free. Sign up before the first lesson.

Is there a certificate?

On track completion, with a verifiable credential ID.

markup

<div class="ns-accordion ns-accordion--flush">
  <details class="ns-accordion__item" open><summary class="ns-accordion__summary">Do I need a developer org?<i class="ph ph-caret-down ns-accordion__marker" aria-hidden="true"></i></summary><div class="ns-accordion__content">Yes, and it is free. Sign up before the first lesson.</div></details>
  <details class="ns-accordion__item"><summary class="ns-accordion__summary">Is there a certificate?<i class="ph ph-caret-down ns-accordion__marker" aria-hidden="true"></i></summary><div class="ns-accordion__content">On track completion, with a verifiable credential ID.</div></details>
</div>

Separated, plus marker

--plus rotates a plus into a cross: it reads as “expand” rather than “reveal below”, which is better when the panel is long enough that the reader scrolls away from the trigger.

Module 1 — Objects and fields

Six units covering the data model.

Module 2 — Security

Profiles, permission sets, sharing.

markup

<div class="ns-accordion ns-accordion--separated ns-accordion--plus">
  <details class="ns-accordion__item"><summary class="ns-accordion__summary">Module 1 — Objects and fields<i class="ph ph-plus ns-accordion__marker" aria-hidden="true"></i></summary><div class="ns-accordion__content">Six units covering the data model.</div></details>
  <details class="ns-accordion__item" open><summary class="ns-accordion__summary">Module 2 — Security<i class="ph ph-plus ns-accordion__marker" aria-hidden="true"></i></summary><div class="ns-accordion__content">Profiles, permission sets, sharing.</div></details>
</div>

Numbered

The mono index motif on the summary row.

01What is an org?

Your own Salesforce instance — data, users, and code, isolated from everyone else's.

02Objects and fields

Standard and custom objects.

markup

<div class="ns-accordion" style="max-inline-size:28rem">
  <details class="ns-accordion__item" open>
    <summary class="ns-accordion__summary"><span class="ns-accordion__index">01</span>What is an org?</summary>
    <div class="ns-accordion__content">Your own Salesforce instance — data, users, and code, isolated from everyone else's.</div>
  </details>
  <details class="ns-accordion__item">
    <summary class="ns-accordion__summary"><span class="ns-accordion__index">02</span>Objects and fields</summary>
    <div class="ns-accordion__content">Standard and custom objects.</div>
  </details>
</div>

Accessibility contract

Give items the same name attribute for native exclusive-open behaviour