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

Accordion

Accordion is used to toggle between hiding and showing content.
  • Examples
  • Properties
  • Accessibility

Examples

To render accordion, use the class chi-accordion.

JavaScript

Methods

Method
Description
Returns
hide() => void
Hides the accordion or individual accordion item (if provided)
Type: void
show() => void
Shows the accordion or individual accordion item (if provided)
Type: void
toggle() => void
Toggles active state (show/hide) of the accordion or accordion item (if provided)
Type: void
expandAll() => void
Expands all the accordion items
Type: void
collapseAll() => void
Collapses all the accordion items
Type: void

Preventing memory leaks

Accordion component has a dispose function to free all the 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 accordion method more than once, as it will return any previously created accordion component associated with the element.

Accessibility

Accessibility guidelines coming soon