Smart.Accordion element represents a custom element with expandable items. It is a lightweight container that may either stand alone or be connected to a larger surface.

Each accordion item contains header and content part. Click on the header toggles the content part.

smartAccordion may be used for a variety of tasks, such as:

  • To edit a setting
  • To create a tool for ad campaigns

Usage

Editing
Creating flows


Behavior

Expand
Collapse
Focus


Accordion Web Components Usage


Editing

Accordions are best used for lightweight editing of an element, such as selecting a value for a setting.

For example, an app that contains tables may use accordion to adjust settings on table elements.


Creation flows

Accordion items may be displayed in a sequence to form creation flows.

This is an example of a tool for creating ad campaigns.

Carribean cruise Barbados The best cruise line Vegetarian

Behavior

Collapsed accordion item

Displays summary information. Upon selecting the collapsed panel, it expands to display the full expansion panel.

Expanded accordion item

Upon selection, a collapsed panel expands, allowing users to add or edit information.

Helper text may be added to the panel to assist the user.

Focus state

An expansion panel may use a focus state (by using a grey background on the list item) to provide focus to individual list items.

On a keyboard, users may traverse through list items by using the Tab key.







 I'm visible because I am open