---
title: "Perspective - Accordion"
description: "The Accordion component allows the embedding of expandable/collapsible views."
---

# Perspective - Accordion

> The Accordion component allows the embedding of expandable/collapsible views.

![](2021-04-08-11-28-accrdn-ANI.gif)

**Component Palette Icon**:  

![](2020-05-20_14-54-49.png)

## Description
The Accordion component allows the embedding of expandable/collapsible views which can be toggled with a click or a tap of their headers. The headers may contain text or a view.

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| Name    | Description   | Property Type  | 
| ----------------- | ------------ | -------------- | 
|expansionMode	|Determines how many items can be expanded at a given time. Options are `single` and `multiple`. When using `single` any item that's currently expanded will collapse if another one is clicked. When using `multiple`, items that are expanded will remained open until they are collapsed. |value: string|
|items	|An array of items in the accordion. Each item has a separate header and body configurations.**expanded**: Determines if the the accordion body expanded. Set to true to expand, false to collapse. Value is boolean.**header**: An object containing configuration options for the toggle icon. Click to see [header](#header-properties) properties. **body**: An object containing configuration options for the body. Click to see [body](#body-properties) properties.|array|
|style|	Sets a style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).|	object|
|unusedSpaceStyle	|Sets a style for the empty area at the bottom of the accordion. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).|	object|

### header Properties
| Name    | Description    | Property Type  |
| ------- | ------------ | -------------- |
| toggle  | An object containing configuration options for the toggle icon.**enabled**:	Enables the collapse and expand toggle. Value is boolean.**expandedIcon**: An object containing configuration options for the header icon while the item body is expanded.**path**: Shorthand path to the icon source, in format: library/iconName. Value is string.**color**: Color of the icon. May instead 'fill' in the styles prop. Value is string.**style**: Sets a style for the expandedIcon. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).**collapsedIcon**: An object containing configuration options for the header icon while the item body is collapsed.**path**:	Shorthand path to the icon source, in format: library/iconName. Value is string.**color**: Color of the icon. If deleted, the Shape "fill" property in the adjacent style object will determine the color of the icon. Value is string.**style**: Sets a style for the expandedIcon. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).| object|
| content | An object containing configuration options for the content. **type**: Whether text or a view will be rendered in this accordion header. Set this property to either 'text' or 'view'. Value is string.**text**: Text to display for this accordion header. Value is string.**useDefaultViewWidth**: Use of view's default width instead of adjusting based on the content's width. Value is boolean.**useDefaultViewHeight**: Use of view's default height instead of adjusting based on the content's height. Value is boolean.**viewPath**: Path to view to render in this according header. Value is string.**viewParams**: Params to pass to this view rendered in this accordion header. A dropdown list of parameters is available when the user clicks the **Add Object Member** ![](2021-03-01_10-43-25-icon-ad-parm.png) icon. This makes it easy to add parameters from the rendered view.**style**: Sets a style for the content. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object         |
| height  | The height of the header. | value: string  |
| reverse | Reverses the order of the toggle and header content, (i.e., from left side to the right side).   | value: boolean |
| style   | Sets a style for the header. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object         |

### body Properties

| Name    | Description    | Property Type  |
| ------- | ------------ | -------------- |
|viewPath	|Path of the view to display. If a path is present in the viewPath property, an Open View ![](image-2023-6-13_6-29-5.png) icon will appear that will navigate directly to the view when clicked. |value: string|
|viewParams|Parameters for the view. If passing parameters into the embedded view, the names here must match the parameters on that view. A dropdown list of parameters is available when the user clicks the **Add Object Member** ![](2021-03-01_10-43-25-icon-ad-parm.png) icon. This makes it easy to add parameters from the rendered view.|object|
|useDefaultViewWidth	|Use of view's default width instead of adjusting based on the content's width.|	value: boolean|
|useDefaultViewHeight	|Use of view's default height instead of adjusting based on the content's height.| 	value: boolean|
|height|	The height of the body.|	value: string|
|style	|Sets a style for the body. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).	|object|

## Scripting
See the [Perspective - Accordion Scripting](perspective-accordion-scripting.md) page for the full list of scripting functions available for this component.

## Example
This Accordion example has three multiple embedded expandable and collapsible views. Each view can be expanded or collapsed by clicking on their headers. The Tank Farm and the Production Alarms views are both expanded while the Report view is collapsed.

The three views used in the accordion example are working views and the component was configured to use these existing views. Configuring the accordion component is just a matter of how you want to present the information on the component, and then to configure its properties.

**Preview Mode**

![](2020-05-22_17-07-36.png)

**Property Settings**

| Property                                       | Value                |
| ---------------------------------------------- | -------------------- |
| expansionMode                                  | multiple             |
| props.items.0.header.toggle.expandedIcon.path  | material/assignment  |
| props.items.0.header.toggle.collapsedIcon.path | material/expand_more |
| props.items.0.header.content.type              | text                 |
| props.items.0.header.content.text              | Tank Farm            |
| props.items.0.body.viewPath                    | Tank Farm            |
| props.items.0.body.style.marginTop             | 3px                  |
| props.items.0.body.style.margin                | 10px                 |
| props.items.1.header.toggle.expandedIcon.path  | material/alarm       |
| props.items.1.header.toggle.collapsedIcon.path | material/expand_more |
| props.items.1.header.content.type              | text                 |
| props.items.1.header.content.text              | Production Alarms    |
| props.items.1.body.viewPath                    | Production Alarms    |
| props.items.1.body.style.marginTop             | 3px                  |
| props.items.1.body.style.margin                | 10px                 |
| props.items.2.header.toggle.expandedIcon.path  | material/info        |
| props.items.2.header.toggle.collapsedIcon.path | material/expand_more |
| props.items.2.header.content.type              | text                 |
| props.items.2.header.content.text              | Report               |
| props.items.2.body.viewPath                    | Report4              |
| props.items.2.body.style.marginTop             | 3px                  |
| props.items.2.body.style.margin                | 10px                 |