Accordion

Accordion components are Layout Fields that organize collapsable information.

accordion.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "tab5",
        "kind": "layout",
        "widget": "accordion",
        "props": {
          "sections": [
            { "label": "Personal Information", "uid": "section1" },
            { "label": "Shipping Address", "uid": "section2" },
            { "label": "Billing Address", "uid": "section3" }
          ]
        },
        "children": [
          {
            "uid": "section1",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "shoppingCart.firstName"
              }
            ]
          },
          {
            "uid": "section2",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "shoppingCart.shippingAddress"
              }
            ]
          },
          {
            "uid": "section3",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "shoppingCart.billingAddress"
              }
            ]
          }
        ]
      }
    ]
  }
}

Props

Use this props to customize your Accordion component.

prop	type	value
singleOpen	boolean	A boolean value to have only one active section at a time
defaultOpen	object	An object with a dictionary of sections with boolean values to display sections on start
sections	array	MANDATORY An array of objects with title and a target uid in the children array

Single Open

Use the property singleOpen to display only one section. When true Accordion component will collapse other sections if a new section has been selected.

accordion.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "tab5",
        "kind": "layout",
        "widget": "accordion",
        "props": {
          "singleOpen": true,
          "sections": [
            { "label": "Personal Information", "uid": "section1" },
            { "label": "Shipping Address", "uid": "section2" },
            { "label": "Billing Address", "uid": "section3" }
          ]
        },
        "children": [
          {
            "uid": "section1",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "shoppingCart.firstName"
              }
            ]
          },
          {
            "uid": "section2",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "shoppingCart.shippingAddress"
              }
            ]
          },
          {
            "uid": "section3",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "shoppingCart.billingAddress"
              }
            ]
          }
        ]
      }
    ]
  }
}

Default Open

Use the property defaultOpen to open one or more sections on start.

accordion.json

{
  "form": {
    "uid": "",
    "kind": "layout",
    "widget": "stack",
    "children": [
      {
        "uid": "tab5",
        "kind": "layout",
        "widget": "accordion",
        "props": {
          "defaultOpen": {
            "section1": true,
            "section2": true
          },
          "sections": [
            { "label": "Personal Information", "uid": "section1" },
            { "label": "Shipping Address", "uid": "section2" },
            { "label": "Billing Address", "uid": "section3" }
          ]
        },
        "children": [
          {
            "uid": "section1",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "shoppingCart.firstName"
              }
            ]
          },
          {
            "uid": "section2",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "shoppingCart.shippingAddress"
              }
            ]
          },
          {
            "uid": "section3",
            "kind": "layout",
            "widget": "stack",
            "children": [
              {
                "uid": "",
                "kind": "control",
                "widget": "textinput",
                "path": "shoppingCart.billingAddress"
              }
            ]
          }
        ]
      }
    ]
  }
}

Styling

Accordions can be styled as explained in the Styling Guide.

CSS Variables

Following you will find a list with the CSS Variables and a quick description of what you will style.

CSS Variable	Description
--gui-space-gap	Accordion margins
--gui-padding	Button and Section padding
--gui-color-border	Button and Section border color
--gui-color-bg	Button and Section background color
--gui-color-fg	Button and Section text color

Anatomy

This is the anatomy of the Accordion Component in case you want to use your CSS styles.

accordion.html

<gui-accordion>
  <div class="gui-accordion__section">
    <button type="button" tabindex="1" class="active" aria-expanded="true">
      Label<span class="gui-accordion__icon"></span>
    </button>

    <section class="gui-field" role="region"></section>
  </div>
</gui-accordion>