Accordion

A layout component, the Accordion can be used to group other components within sections. each of which can hold other Skuid components. End users can open/expand or close/collapse sections, allowing them to view and interact the components contained within.

The Accordion is a responsive component, adjusting to the size of the screen.

Using the Accordion

Use the Accordion to include multiple “hidden” components that are accessible with a click, reducing page clutter and improving the user’s experience. Simply drag and drop an Accordion onto the page, then equip it with sections, and fill the sections with components.

Add sections

  • Add new sections by clicking Add Section on the Accordion.
    • In the Section Properties pane, give the section a heading.
  • Remove sections by clicking on the section, then clicking Remove Section.
  • Adjust the Accordion properties to style the accordion sections

Add components to sections

  • Add components by clicking and dragging desired components into an Accordion section. Component properties can then be modified as usual to adjust appearance and behavior.

Properties

Accordion properties

Basic tab [[]]

  • One panel open at a time: If checked, only one panel of the accordion can be open at a time. If the end user opens a new panel, the previously-opened one closes.
  • Open panel max height: The height of the component section (minus the section title), measured in pixels, em, rem, percentage, vh, or vw.
  • Icons on right: If checked, each section displays clickable icons that allow the user to expand and collapse the section.
  • Icon Style: There are two ways to format the section icons:
    • One Icon: A single icon is used to open and close each section. (The selected icon rotates 45° when the section is open.)
      • Icon: Click the field picker to select the icon.
    • Separate icons for open/close:
      • Icon when opened: Use the field picker to select the icon for an opened section.
      • Icon when closed: Use the field picker to select the icon for a closed section.

Advanced tab [[]]

  • Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.

Styles tab [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • Style Variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid Builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

  • Spacing: Sets the spacing of the Header relative to other components on the page. Spacing can be managed for Top Margin, Bottom Margin, Left Margin, Right Margin. All margins can be set to one of the following:

    • None
    • Extra Small
    • Small
    • Reduced
    • Regular
    • Increased
    • Large
    • Extra Large
    • Huge

    Note

    These sizes are relative to one another; the baseline is determined by Design System settings.

Display Logic tab [[]]

Conditional rendering allows you to display or hide the Accordion, based on defined data conditions.

Section properties

Basic tab [[]]

  • Section Heading: The text heading for the section. Type in section text, or select a field to use as the header. (This property accepts merge syntax.)

Display Logic tab [[]]

Conditional rendering allows you to display or hide the Accordion sections, based on defined data conditions.