# Accordion Panel

(part of package '[Bootstrap Components](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/bootstrap-components)')\
Extends designtime/SolutionModel: [JSWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jswebcomponent)\
Extends runtime: [RuntimeWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent)

The AccordionPanel component is a container similar to a TabPanel, but, instead of having tabs for showing / hiding forms, it has buttons that behave like an accordion, moving one way or the other.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### activeTabIndex

The index of the currently active tab in the accordion. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 0

***

### containerStyleClass

The CSS class(es) to be added to container element - parent of the form element. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### height

Minimum height of the accordion, should be used for responsive forms. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: "500"

***

### styleClass

The CSS class(es) to be added to accordion element. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### tabIndex

The index used for tab order when setting focus. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 1

***

### tabSeq

The tab sequence order used during design. Type: [Tabseq](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tabseq)

***

### tabs

Array of tabs within the accordion component. Type: [Array\<CustomType\<bootstrapcomponents-accordion.tab>>](#tab)

***

### visible

Whether the button is visible or not Type: [Visible](https://docs.servoy.com/servoy-developer/component_and_service_property_types#visible)

***

## Events

### onChangeMethodID(previousIndex,event,newIndex)

Fired after a different tab is selected

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} previousIndex The previous tab index
> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the tab change
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} newIndex The tab index that is now set

***

## API

### addTab(form,tabText,index)

Adds a tab to this accordion with that form and text on the given index

**Parameters:**

> * {[Form](https://docs.servoy.com/servoy-developer/component_and_service_property_types#form)} form The form to be added as a new tab in the accordion component.
> * {[Tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)} tabText The text to be displayed on the tab for the added form.
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} \[index] Optional. The position at which the tab should be added. If not provided, the tab is added at the end.

**Returns:** [CustomType\<bootstrapcomponents-accordion.tab>](#tab) The newly created tab object that represents the added form in the accordion component.

***

### getTabAt(i)

Return the Tab of the given index.

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} i The 1-based index of the tab to retrieve from the accordion component.

**Returns:** [CustomType\<bootstrapcomponents-accordion.tab>](#tab) The tab object at the specified index in the accordion component.

***

### removeTabAt(index)

Removes a tab of the given index.\
Return true if this was sucessfull.

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} index The 1-based position of the tab to be removed from the accordion component.

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) True if the tab was successfully removed; false otherwise.

***

### selectTabAt(index)

Select the tab of the given index.\
Return true if this was succesfull.

**@deprecated** use tabIndex property instead.

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} index

***

## Types

## tab

Defines a tab object for the AccordionPanel component. scripting type: CustomType\<bootstrapcomponents-accordion.tab>

* containedForm
  * The form contained within the tab.
  * **Type**: [form](https://docs.servoy.com/servoy-developer/component_and_service_property_types#form)
* disabled
  * Whether the tab is disabled.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: false
* name
  * The unique name identifier of the tab.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* relationName
  * The relation name associated with the tab used for linking forms.
  * **Type**: [relation](https://docs.servoy.com/servoy-developer/component_and_service_property_types#relation)
* text
  * The text displayed on the tab.
  * **Type**: [tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)
  * **Default Value**: "tab"

***