Accordion widget

The Accordion widget is a layout container that you can use to organize other widgets into a vertically stacked menu. Each widget that you put in an Accordion widget becomes a header with an expanded and collapsed state. You can customize the headers, the expand and collapse buttons, and the widget panels.

Examples

Use this widget to support app design requirements such as the following:

• You want to organize elements such as text, legends, and layer lists.
• You want to save space on app pages where you do not need all of your content to be visible at the same time.
• You want to display headlines and allow users to choose if they want to expand and view more information.

Usage notes

When you add an Accordion widget, the Quick style menu appears. You can choose from four default styles. The main differences between the four styles are the shape and contents of the headers. You can customize all of these things in the widget's settings.

To add widgets to the accordion, drag in widgets from the Insert widget panel.

You can reorder widgets in the accordion by clicking and dragging them by their headers. You can also click a widget and use the Move down and Move up buttons that appear on the widget's toolbar.

To remove a widget from the accordion, click its header and drag it out.

To change a widget's icon and name in the header, select the widget and change the icon and name at the top of the widget configuration panel.

Settings

The Accordion widget includes the following settings:

• Layout—These settings affect spacing for the header elements, relative to each other and to the edges of the Accordion widget panel.
  • Gap—Define the amount of vertical space between headers in pixels (px).
  • Padding—Change the size of the padding spaces, which are the spaces between the headers and the edges of the widget panel, either all at once or separately. You can specify size values in pixels (px).
• General settings—These are settings related to expanding the headers.
  • How many items can be expanded—Choose whether users can expand only one header at a time or multiple headers at a time.
  • Expand items on loading—Optionally, choose one or more widgets to be expanded automatically when the widget first loads.
  • Expand / Collapse all buttons—Add buttons to the widget panel that expand and collapse all headers.
• Header—You can click the three different parts of the header editor to reveal settings related to the background and border, padding, and content.

  

  • Background and border—Settings related to the header background and border.
    • Background—Choose background colors for when the headers are collapsed and for when they are expanded.
    • Border—Change the fill color, stroke, and size of the header border in pixels (px). You can change all of these attributes for the entire border or for all four sides individually.
      • Border radius—Change the length of the border radii, either all at once or independently for the four corners. You can specify radius values in pixels (px) or percent (%). Set a larger radius to make the header corners more rounded.
  • Padding—Change the size of the padding spaces, which are the spaces between the four edges of the header and the header content, either all at once or separately. You can specify values in pixels (px).
  • Content—Settings related to the content of the headers.
    • Icon—Include widget icons in the headers. You can change the size of the icons and change their color. You can set widget icons at the top of each widget's configuration panel.

      Note:

      If you upload custom icons, you might not be able to change their color with this setting.

    • Text—Apply bold, italic, strikethrough, and underline formatting to the text in the headers. You can also change the font color and set the font size in pixels (px).
    • Buttons—Set the icons for the expand button and collapse button.
    • Toggle position—Choose where to put the expand and collapse buttons, either at the left (Start) or right (End) of each header.
• Panel—Settings related to the widget panels, which are the panels that you open and close with the expand and collapse buttons.
  • Padding—Change the size of the padding spaces, which are the spaces between the content of the widget and the four edges of the widget panel, either all at once or separately. You can specify size values in pixels (px).
  • Fill—Choose a fill color for the widget panels.
  • Border—Change the fill color, stroke, and size of the panel border in pixels (px). You can change all of these attributes for the entire border or for all four sides individually.
    • Border radius—Change the length of the border radii, either all at once or independently for the four corners. You can specify radius values in pixels (px) or percent (%). Set a larger radius to make the panel corners more rounded.