The “Accordion” element is a content area that can be expanded or collapsed. It contains a vertically placed list of items. In the list, the “Accordion” element can have labels or thumbnails. Each item in the list can be expanded or collapsed to display the content associated with that item.
|When to use|
|–> An accordion can be used to group or hide the complex regions to keep the page clean. |
–> An accordion is a special kind of collapsible/expandable element, which allows only one panel to be expanded at a time.
The “Accordion” element has the following property:
- UI Configuration
For the “Accordion” element and its header section, you can configure the following properties:
|Tab||Property Name||Description||Mandatory||New Default Value||Visibility Rules|
|Basic||Reference Name||Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.||Yes||Column_xxxxx|
|Basic||Elevation||Allows you to configure the elevation of the background. The elevation is measured as the relative distance between two surfaces along the Z-axis.||No|
|Basic||Visible||Click this check box to make the element visible to the end-user.||No||Clear|
|Basic||Enable||Click this check box to make the element active in the application. The end-user can perform the function on the active element.||No||Clear|
|UI properties||Styles||Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.|
|UI Properties-Alignment & Spacing||Margin||Allows you to define a margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom borders of the element.||No||Theme Variable (Margin)|
|UI Properties-Shape & Decoration||Width Value||Enter the width of the element in the pixel unit or percentage unit.||No|
|UI Properties-Shape & Decoration||Height Value||Enter the height of the element in the pixel unit.||No|
|UI Properties-Shape & Decoration||X||Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.||No||Current X coordinate of the element|
|UI Properties-Shape & Decoration||Y||Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.||No||Current Y coordinate of the element|
|UI Properties-Shape & Decoration||Border Color||Allows you define the color of the element’s border. To define the color:|
–> In the Border Color box, click the left color box (), and a color canvas open.
–> On the canvas, on the horizontal bar, move the circle to select the color.
–> In the upper section, move the circle to select the tone of the color.