Tokyo - Components | Acordion

Last modified:

"Accordion" is a component that groups contents in a drop-down menu.
This component is added within the screens by default. (See here), it can also be added inside a row or a pop-up.
You will find this component in the group of "Cataloguer" components.

Image 5920

When creating the "Accordion" component, three "Accordion items" Image 1x" data-image="e0dubaqodo81"> are included by default. Each "Accordion item" is organised in two areas:

  • A title.
  • A content area including a sample text. We can include more components within this area.

Image 5921

This component has a complex structure, as it consists of many items with their own specific properties. When configuring this component, we should pay attention and select the right item. We can select items from the breadcrumb trail and from the "Structure" tab.

Breadcrumb trail

"Structure" tab

Image 5922

Image 5923

Setup process

First, we should choose a type of accordion. There are two types available (numeric accordion and non-numeric accordion).

Image 5924

Next steps:

1.  When creating this component, three elements are included by default. We can add new "Accordion items" to the "Add" tab, if required.

2. Go to the "Properties" tab and configure the parameters of the accordion.

Image 5925

3.  Write a title for each item included in the accordion.

4. Select the content area within the "Accordion item" and configure its content. A sample text is added by default, but we can add other components from the "Add" tab.

Image 5928

Accordion properties




It allows modifying the graphic layout of the accordion:

  • Standard: primary and secondary colours can be applied to the unit, if this is appropriate to the chosen view (See here to learn how to configure the unit colours).
  • Customised: customised colours can be applied to the accordion. New properties will be enabled to modify the border, background and title colours.

Order type

This property is only available when choosing the numeric accordion. This field helps us to decide how we want to number the accordion tabs.

  • Decimal
  • Roman numerals (lower case)
  • Roman numerals (upper case)
  • Alphabet (lower case)
  • Alphabet (upper case)

Start of order

We can use this property to choose a number to start numbering the tabs.


This property allows changing the space occupied by a component inside a central column of contents. The component occupies 100% of the space by default, but size can be reduced to other preset percentages or can be displayed in "full-size". Some quote styles may overlap the central column if "Full" width is chosen.


This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

Overcome goal

It allows to modify the configuration of the overcoming of the objectives of this concrete component. We can choose between:

  • Inherited: this option aply the default value defined in the Completion Objectives Area (See here).
  • Non objetive: this audio will not an objetive to complete the unit.
  • Interact: It is necessary interact with the component to reach the objective.
  • Complete: it is necessary to visit all the options of the accordion to overcome the goal.

Is this article helpful for you?
© 2023 Netex Knowledge Factory. All Rights Reserved. Disclaimer | Privacy policy | Cookie Policy.