Accordion

Accordions are used most often for hiding and showing groups of similar content.

Overview

Stacking multiple Accordions is a useful way to save space in the interface. Accordions should not contain primary actions like share, save, etc. Accordions can contain helper icons, have containing borders, or have a more minimal styling.

Usage

  • To organize related information.
  • To shorten pages and reduce scrolling when content is not crucial to read in full.
  • When space is at a premium and long content cannot be displayed all at once, like on a mobile interface or in a side panel.

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Best practices

Individual calcite-accordion-item components can be used to house content. Since an individual calcite-accordion-item can at times be collapsed, ensure no crucial information or controls are contained inside.

Accessibility

Keyboard navigation

KeyFunction
Arrow downMove focus to next item. If the current focus is the last item, the focus and selection will cycle to the first item
Arrow upMove focus to previous item. If the current focus is the first item, the focus and selection will cycle to the last item
HomeMove focus to first item
EndMove focus to last item
EnterToggle (expand/collapse) currently focused item
SpaceToggle (expand/collapse) currently focused item
TabMove focus to next non-disabled item. If the currently focused step is the last step, the focus will leave the component
Tab and ShiftMove focus to previous non-disabled item. If the currently focused step is the first step, the focus will leave the component

API reference

calcite-accordion
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
appearanceappearance

specify the appearance - default (containing border), or minimal (no containing border), defaults to default

typedChoose from a set of typed values
default (default)minimaltransparent
iconPositionicon-position

specify the placement of the icon in the header, defaults to end

typedChoose from a set of typed values
end (default)start
iconTypeicon-type

specify the type of the icon in the header, defaults to chevron

typedChoose from a set of typed values
caretchevron (default)plus-minus
scalescale

specify the scale of accordion, defaults to m

typedChoose from a set of typed values
lm (default)s
selectionModeselection-mode

specify the selection mode - multi (allow any number of open items), single (allow one open item), or single-persist (allow and require one open item), defaults to multi

typedChoose from a set of typed values
multi (default)singlesingle-persist

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however calcite-accordion-item`s can.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.