CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Expansion panel

Expansion panels organize content into collapsible panels and reveal them to users in a progressive, step-by-step way.
  • Examples
  • Properties
  • Accessibility

Examples

loading...

Web Component

Chi Vue

Props

Property
Description
Type
Default
bordered
to set the panel style to bordered
boolean
undefined
state
to set expansion panel state. Possible values are: {'done', 'active', 'pending' (default value), and 'disabled'}
string
'pending'
stateIcon
to render a state icon within the panel
boolean
false
step
to set a step number next to the title of the panel
string
undefined
title
to define expansion panel title
string
undefined
stateIconTooltip
to define a content for state icon tooltip
string
Done

JavaScript

Actions

You can bind actions to activators inside the expansion panel with the data-chi-epanel-action attribute.

ActionDescription
pendingSets the panel to the pending state. All the contents under the -active--only and the -done--only will not be visible.
activeSets the panel to the active state. All the contents under the -active--only will be visible.
toggleIn the case the panel is previously set to active, this action sets it to pending. It sets to active state otherwise.
doneSets the panel to the done state. All the contents under the -done--only will be visible.
disabledSets the panel to the disabled state. All the contents under the -active--only and the -done--only will not be visible, and the title will render in a soft grey color.
inactiveIs a synonym for pending.
nextSets the next panel in active status.
previousSets the previous panel in active status.

You can freely add, remove or change the data-chi-epanel-action attribute on the fly, as is the main element with the chi-epanel class, the one which listens for the events.

Preventing memory leaks

Expansion panel components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

It is safe to call the expansionPanel method more than once, as it will return any previously created expansion panel component associated to the element.

Accessibility

Accessibility guidelines coming soon