Accordion

Description

.bp-accordion wraps native <details>/<summary> elements. The browser handles open/close state, keyboard interaction, and accessibility natively. CSS provides the animated arrow and a smooth @starting-style entrance for the body panel.

Usage

Default

What is Be Partner DS?

A CSS-first, token-driven, framework-agnostic design system built by BePartnerLabs.

How do I use it?

Import index.css and add the classes to your HTML. No framework needed.

Is JavaScript required?

No. The open/close behaviour is entirely native via the <details> element.

<div class="bp-accordion">
<details class="bp-accordion__item">
  <summary class="bp-accordion__summary">What is Be Partner DS?</summary>
  <div class="bp-accordion__body">
    A CSS-first, token-driven, framework-agnostic design system built by BePartnerLabs.
  </div>
</details>
<details class="bp-accordion__item">
  <summary class="bp-accordion__summary">How do I use it?</summary>
  <div class="bp-accordion__body">
    Import <code>index.css</code> and add the classes to your HTML. No framework needed.
  </div>
</details>
<details class="bp-accordion__item" open>
  <summary class="bp-accordion__summary">Is JavaScript required?</summary>
  <div class="bp-accordion__body">
    No. The open/close behaviour is entirely native via the <code>&lt;details&gt;</code> element.
  </div>
</details>
</div>

Public API

Variable	Default	Description
`--accordion-bg`	`transparent`	Item background
`--accordion-radius`	`0px`	Item border radius
`--accordion-border`	`1px solid var(--bp-color-border)`	Item border
`--accordion-accent`	`var(--bp-primary)`	Left border color when open

Customization example

Subtle FAQ variant

Can I use this with React?

Yes — it's plain CSS classes. Use them in any framework.

What browsers are supported?

All modern browsers. @starting-style degrades gracefully (no animation, still functional).

<style>
.faq .bp-accordion__item {
  --accordion-bg: var(--bp-color-bg-subtle);
  --accordion-border: none;
  --accordion-radius: var(--bp-radius-lg);
}
</style>
<div class="bp-accordion faq">
<details class="bp-accordion__item">
  <summary class="bp-accordion__summary">Can I use this with React?</summary>
  <div class="bp-accordion__body">Yes — it's plain CSS classes. Use them in any framework.</div>
</details>
<details class="bp-accordion__item">
  <summary class="bp-accordion__summary">What browsers are supported?</summary>
  <div class="bp-accordion__body">All modern browsers. @starting-style degrades gracefully (no animation, still functional).</div>
</details>
</div>

Exclusive group — close others on open

Add the same name attribute to every <details> in the group. The browser enforces that only one can be open at a time — no JavaScript needed. This is a native HTML feature (Chrome 120+, Firefox 130+, Safari 17.2+).

Exclusive group via name attribute

What is Be Partner DS?

A CSS-first, token-driven, framework-agnostic design system. Opening another item closes this one automatically.

Do I need JavaScript?

No. The name attribute is handled entirely by the browser — zero JS.

Which browsers support this?

Chrome 120+, Firefox 130+, Safari 17.2+. On older browsers it degrades gracefully — items stay independent (multiple can be open).

<div class="bp-accordion">
<details class="bp-accordion__item" name="faq">
  <summary class="bp-accordion__summary">What is Be Partner DS?</summary>
  <div class="bp-accordion__body">
    A CSS-first, token-driven, framework-agnostic design system. Opening another item closes this one automatically.
  </div>
</details>
<details class="bp-accordion__item" name="faq" open>
  <summary class="bp-accordion__summary">Do I need JavaScript?</summary>
  <div class="bp-accordion__body">
    No. The <code>name</code> attribute is handled entirely by the browser — zero JS.
  </div>
</details>
<details class="bp-accordion__item" name="faq">
  <summary class="bp-accordion__summary">Which browsers support this?</summary>
  <div class="bp-accordion__body">
    Chrome 120+, Firefox 130+, Safari 17.2+. On older browsers it degrades gracefully — items stay independent (multiple can be open).
  </div>
</details>
</div>

The name value is scoped to the document — use a unique name per accordion group on the page to avoid items from different accordions interfering with each other.

<!-- Group A -->
<details class="bp-accordion__item" name="pricing-faq">…</details>
<details class="bp-accordion__item" name="pricing-faq">…</details>

<!-- Group B — independent -->
<details class="bp-accordion__item" name="support-faq">…</details>
<details class="bp-accordion__item" name="support-faq">…</details>

Accessibility

<details> and <summary> have native keyboard support (Enter/Space to toggle).
Screen readers announce expanded/collapsed state natively — no ARIA needed.
:focus-visible is present on the summary.

Browser APIs

API	Availability	Used for	Without it	Polyfill
`<details>` / `<summary>`	Widely available Baseline 2020	Native open/close toggle, keyboard, accessibility	No fallback — use a JS-driven component instead	Not needed
`<details name>`	Newly available Baseline 2024	Exclusive group — close others on open	Multiple items can be open simultaneously	None; degrades gracefully
`@starting-style`	Newly available Baseline 2024	Fade entrance animation on body panel open	No entrance animation, fully functional	None needed
Container Queries	Widely available Baseline 2023	Fluid layout adjustments at small sizes	Static layout	None needed
`cqi` units	Widely available Baseline 2023	Fluid font-size inside containers	Fixed font-size from tokens	None needed

Internals

--_bg, --_radius, --_border, --_accent — component-private, do not set directly.