Accordion

Accordions are most often used for hiding and showing sections of related content.

Overview

Accordions can have different selection modes, where users can have multiple or single Accordion Item(s) open.

Usage

  • To organize related text-based information.
  • To shorten pages and reduce scrolling when content is not crucial to read in full.

Sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<calcite-accordion>
    <calcite-accordion-item description="Yachts, boats, and dinghies" heading="Watercraft" icon-start="embark">
        <calcite-notice open>
            <div slot="message">Recommended for coastal use</div>
        </calcite-notice>
    </calcite-accordion-item>
    <calcite-accordion-item icon-start="car" heading="Automobiles" description="Cars, trucks, and buses">
        <calcite-notice open>
            <div slot="message">A good choice for inland adventure</div>
        </calcite-notice>
    </calcite-accordion-item>
    <calcite-accordion-item icon-start="plane" heading="Aircraft" description="Planes, helicopters, and jets">
        <calcite-notice open>
            <div slot="message">Cross continents quickly</div>
        </calcite-notice>
    </calcite-accordion-item>
</calcite-accordion>
v3.0.2

Best practices

While similar to a Block, Accordions are not intended to be used within within a Panel.

Accordion is best suited to containing narrative or text-heavy content in the main interactive area of an application, whereas Block is recommended for displaying interactive controls and elements within a Panel.

Do use Accordion to contain related but distinct, primarily text-based content.
Do use Accordion within the main content area of an application to save space.
Avoid using Accordion within a Panel. Instead, use one or more Block(s).
Avoid using Accordion to house interactive controls or form-based components.

Try to avoid placing interactive controls or elements that affect an application state or display within Accordion. These should instead be placed within one or more Block(s). However, in certain instances, it may be appropriate to place interactive controls or form-based elements inside an Accordion - for example, when located within the main content area of a Settings page.

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus to next non-disabled calcite-accordion-item. If the currently focused step is the last step, the focus will leave the component.
Tab and ShiftMoves focus to previous non-disabled calcite-accordion-item. If the currently focused step is the first step, the focus will leave the component.
EnterToggles the expansion of the selected calcite-accordion-item.
SpaceToggles the expansion of the selected calcite-accordion-item.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
appearanceappearanceSpecifies the appearance of the component."solid" | "transparent""solid"
iconPositionicon-positionSpecifies the placement of the icon in the header."end" | "start""end"
iconTypeicon-typeSpecifies the type of the icon in the header."caret" | "chevron" | "plus-minus""chevron"
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
selectionModeselection-modeSpecifies the selection mode of the component, where: "multiple" allows any number of selections, "single" allows only one selection, and "single-persist" allows one selection and prevents de-selection."multiple" | "single" | "single-persist""multiple"

Slots

NameDescription
default (unnamed)A slot for adding calcite-accordion-items. calcite-accordion cannot be nested, however calcite-accordion-items can.

Styles

NameDescription
--calcite-accordion-border-colorSpecifies the component's border color.
--calcite-accordion-background-colorSpecifies the component's background color.

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close