Skip to main content
Version: 4.4.0

Accordion

An accordion is a layout component that allows to organize the content in different sections that can be collapsed or expanded. Inside its panels, it allows to have the same content as a window or a tag element, even nested accordions.

Accordion

XML skeleton

<accordion id="[accordion-identifier]" ...>
<accordion-item... />
<dependency... />
</accordion>

Accordion structure

<accordion id="[accordion-identifier]" selected="[id-selected]" autocollapse="[accordion-autocollapse]" style="[accordion-style]">
...
</accordion>

Accordion attributes

AttributeUseTypeDescriptionValues
idRequiredStringAccordion identifier. For reference purposes
autocollapseOptionalStringIf set to "true" only one accordion item can stay opened at a timetrue or false (default is true)
selectedOptionalStringIf we want an accordion item to be opened at the beginning, set its ID here
styleOptionalStringGrid CSS classesWe can use panel-group-[type] and panel-group-dark classes to style (type can be the usual danger, success, etc. values)

Accordion Item structure

<accordion-item id="[accordion-item-identifier]" label="[accordion-item-label]" 
style="[accordion-item-style]">
...
</accordion-item>

Accordion Item attributes

AttributeUseTypeDescriptionValues
idRequiredStringAccordion item identifier. For reference purposes
labelRequiredStringText to be placed inside of the headerNote: You can use i18n files (locales)
styleOptionalStringGrid CSS classes

Dependencies

If we want to collapse or expand an accordion item using a dependency, we must use one that modifies the attribute selected setting the ID of the item (if it's expanded it will collapse and viceversa)

<dependency target-type="attribute" target-action="selected" value="[child-id]">
...
</dependency>

Examples

Below we can see the difference between having the autocollapse attribute as true (left) or false (right)

Accordion example 1

Below an accordion item holding a window with an include

Accordion example 2

And this would be a full accordion structure example

<accordion id="acc2" autocollapse="false" style="panel-group-info">
<accordion-item id="acc2-1" label="Item 1">
<tag>
<text>
"Lorem ipsum ... laborum."
</text>
</tag>
</accordion-item>
<accordion-item id="acc2-2" label="Item 2">
<tag>
<text>
"Sed ut ... pariatur?"
</text>
</tag>
</accordion-item>
<accordion-item id="acc2-3" label="Item 3">
<tag>
<text>
"At vero ... repellat."
</text>
</tag>
</accordion-item>
</accordion>