Skip to main content Skip to navigation Skip to search

Accordion

An accordion allows generic content to be collapsed and allows users to expand to show more detail.

Angular Components

ClrAccordion

Selector & Basic Usage

Properties

Binding Type Options Default Description
[clrAccordionMultiPanel] input true, false false If true allows multiple panels to be open at the same time.

ClrAccordionContent

ClrAccordionContent is a child of ClrAccordionPanel

Selector & Basic Usage

ClrAccordionDescription

ClrAccordionDescription is a child of ClrAccordionPanel

Selector & Basic Usage

ClrAccordionPanel

Use content projection and give the panel a title and content that can be hidden or shown. ClrAccordionPanel is a child of ClrAccordion

Selector & Basic Usage

Bindings

Binding Type Options Default Description
[clrAccordionPanelDisabled] input true, false false When true this disables click events from opening/closing the panel.
[(clrAccordionPanelOpen)] two-way false Use this to set the open or closed state of the panel. it emits the open (true)/ closed (false) state of the panel

Methods

togglePanel():void

Opens and close the panel.

getPanelStateClasses(panel: AccordionPanelModel):void

Public accessor used by the template

  • Name Type Description
    panel AccordionPanelModel A panel of the accordion.

getAccordionContentId(id: string):string

Public accessor used by the template

  • Name Type Description
    id string Create a specific id for the panel content.

getAccordionHeaderId(id: string):string

Public accessor used by the template

  • Name Type Description
    id string Create a specific id for the panel header.

ClrAccordionTitle

Selector & Basic Usage

Angular Directives

*clrIfExpanded

A structural directive that optimizes the accordion by only creating the panel content node when its in the open state. The panel content node is removed from the DOM when closed. The default is false.

Selector & Basic Usage