Expanders and Accordions


Expanders(which can exist alone, or grouped together into an Accordion) let you create groups of equal importance in your user interface, with those groups appearing vertically. They are most often used to express groups of fields that are subordinate to the current page: data that should be considered "drilling down" or moving deeper into a logical hierarchy.  By tapping an expander, the thin bar of the expander grows taller, showing the details inside, and pushes any information listed below the expander down the screen.  The expanding motion both draws attention to the details, while reinforcing the relationship between the primary data shown on the page, and the secondary data shown within the expander on the page.


Expander Example

An example Expander titled "Mobility Services", with two boolean fields and a text field within it:

  • Note that the ^ symbol shows the state of the Expander (open or closed).  it's not just this symbol which is clickable –  the entire title area of the expander responds to a user's click or tap. 
  • Because the title area is large and easy to click or tap, the expander is a great layout component for interfaces intended primarily for mobile devices.  
  • When used independently, an expander will simply push other information down the page: you can have multiple expanders shown next to each other, and each will open or close only when the user clicks it.

Accordion Example

When two or more expanders are grouped into an Accordion, their behavior changes: only one expander in the accordion can be open.  If an expander in an accordion is opened, then any other open expander in the accordion is closed automatically.  In this way, you can prevent your user from being overwhelmed by seeing too much information at once.


An example of 3 expanders, grouped into one accordion:

 


Use

Expander Properties

Accordion Properties

  • To create...
    • an Expander, add the expander component to the configurator design tree by clicking the "+" icon next to any layout component, and adding an Expander.  Place other items into the expander by dragging their nodes in the tree onto the expander node: they will appear nested within it.
    • an Accordion of expanders, create the accordion component in the design tree, and then drag expanders into it. 
  • To release an expander from the control of an accordion, just drag the expander out of the accordion in the design tree.  
  • To reorder the expanders within an accordion, drag them up or down in the design tree, making sure to stay within the indentation of the accordion.


Name A name appearing in the design tree and Snap rules. The name must be unique to the configurator.
Label If you wish to specify a label in the UI which differs from the name, you may specify it. If label is left blank, the UI label will default to the name.
Visible Specifies whether this expander and its contents are shown to the user by default or not. This property can be changed in the visibility rules.
Expanded Set this to true to show the expander's contents by default.  Leave it set to false to hide the contents, so the user must click it to open it.
Icon Style

None to show no image within the button.

Icon to select one of the many icons included in our default icon set.  You can then select the size of the icon.

Media to upload your own custom image as an icon.  You can then set the width and height of that custom image.

Visible Specifies whether this accordion and its contents are shown to the user by default or not. This property can be changed in the visibility rules.


Position

Container-based position properties appear for this element (and any interface element) when it is placed within a container, and help align it within the container.

For example, if you place this UI element within a container, the following properties will appear.  Take it out of the container, and place it on a page, and these properties will disappear.

Furthermore, the actual position properties themselves change, depending on that parent container's Item Layout.

  • Not seeing any of the "Position" properties below for this UI element?
    Place this element into a container, and then return to this element's properties list. The "Position" accordion will now appear in the properties list.

  • Not seeing the right kinds of "Position" properties for this UI element?
    Change the parent container's item layout to horizontal, vertical, or absolute.  Then return to this UI element. The position properties available for items within that layout (marked by green checkmarks below) will appear.

Property Available when in a horizontal layout Available when in a vertical layout Available when in an absolute layout Description

Relative Size

y

y

n

  • auto (default)
    • sizes the item just large enough to be drawn on-screen and no more. 
    • The item's size is independent: No size relation exists between this item and any other items in the container.
  • x1-x6
    • sizes this item in relation to any other items in the container that also have an x1-x6 relative size.
      For example, if a "First Name" field has a size of x1, and a "Last Name" field also has a size of x1, then they will be the same size.  Change "Last Name" to x2 to make it twice the size of the "First Name" field.
    • The item's size is dependent on other items in the container: change the xN size of another item, or change the items in the container, and this item's size changes slightly to continue to follow the size relations you've defined.

When using relative sizes, try setting all items within the container to  the relative size of "x1" as a starting point, and then adjust the xN levels as necessary.  Mixing items with "auto" and "xN" settings is allowed, but may be difficult to manage.

Alignment

y

y

n

Controls how this item within a container is aligned in the cross axis of the container's layout.

  1. If the parent container's ItemLayout is set to horizontal, then this controls the vertical alignment of the items.
  2. If the parent container's ItemLayout is set to vertical, then this controls the horizontal alignment of the items.
  • stretch
    the item will stretch across the entire cross axis, if possible.  If the item size cannot be adjusted, it will appear centered.
  • start
    the item will appear at the start of the cross axis
  • center
    the item will appear in the center of the cross axis
  • end
    the item will appear at the end of the cross axis

Left

Top

Right

Bottom

Width

Height

n

n

y

The distance between the edge of the parent container and this element.  By default, each is "auto".  Usually, you would set only 2 of these properties, leaving the rest to "auto", or you may distort this image or element.  For example, to align an item's upper-right corner to the upper-right corner of the parent container, set "Top" to 0px, and "Right" to 0px, leaving all other distances to "auto".

Opacity

n

n

y

The visibility of items or backgrounds behind this item.  Use any decimal number from 0 to 1. Set to 0 to make this item completely transparent.  Set to 1 to make the item completely opaque.


Order

y

y

y

Specifies the order in which this item is drawn in the container. Use a whole number, such as 0 or 132.  Default: 0.  Larger numbers are drawn later, and appear closer to the user.

  • Numbers are relative to each other: an item with order "3" will be drawn before an item with order "4". 
  • Order numbers do not need to be consecutive: the next item could have order "50".
    • Order numbers do not need to be unique: if two items have the same order number, such as "0", they will be shown in the order they are defined in the design tree.


Use Zero Padding y y y

By default, UI elements have some padding around them for legibility on all devices, and for ease of use on touch-enabled devices.  However, in some cases you may want specific UI elements to have no padding around them at all (to touch each other).  This can be useful to create a portion of your UI which needs a very high information density. For example, to create a grid of fields that appear like cells in a spreadsheet.





Was this article helpful?