Accordion

Use Accordion to group related content into collapsible sections, such as product details or order summaries. Each section is an AccordionSection child that a shopper can expand or collapse.

Import

import { Accordion, AccordionSection } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
children	VNode<AccordionSectionProps>[] | VNode<AccordionSectionProps>	Yes	The AccordionSection elements to render.
actionIconPosition	'left' | 'right'	No	Position of the expand and collapse icon. Defaults to left.
iconOpen	IconNode	No	Icon for the open button. Defaults to Add.
iconClose	IconNode	No	Icon for the close button. Defaults to Minus.

Accordion also accepts standard <div> HTML attributes (for example, className), except icon. actionIconPosition, iconOpen, and iconClose apply to every section, overriding the same prop when set directly on an AccordionSection.

Each AccordionSection takes its own props:

• title — the section’s heading content.
• ariaLabelTitle — an accessible label for screen readers when the title isn’t a string.
• defaultOpen — whether the section starts expanded. Defaults to false.
• iconLeft — an optional icon shown to the left of the title. Defaults to Add.
• showIconLeft — whether to display that left icon. Defaults to false.
• secondaryText — secondary text shown in the section heading.
• renderContentWhenClosed — whether to keep the section’s content mounted while it’s collapsed. Defaults to true.
• onStateChange — a callback that receives the new open state.

Example

Render an accordion with a single section, opening its icon on the right and showing a leading icon on the section title. Build the AccordionSection children with h.

import { Accordion, AccordionSection, Icon, provider } from '/@dropins/tools/components.js';
import { h } from '/@dropins/tools/preact.js';

await provider.render(Accordion, {
  // Move the expand/collapse icon to the right of each section title.
  actionIconPosition: 'right',
  iconOpen: h(Icon, { source: 'Add' }),
  iconClose: h(Icon, { source: 'Minus' }),
  children: [
    h(
      AccordionSection,
      {
        title: 'Coupon code',
        iconLeft: h(Icon, { source: 'Coupon' }),
        showIconLeft: true,
        // Skip rendering the form while collapsed.
        renderContentWhenClosed: false,
      },
      h('p', {}, 'Enter your coupon code here.'),
    ),
  ],
})(document.querySelector('.accordion'));

Related

• Card — group content into a single container instead of collapsible sections.
• Design tokens — the colors, spacing, and typography the accordion uses.