accordion element

Expandable sections — FAQs, specifications.

Syntax

{ "type": "accordion" }

An element lives in a screen's sections, another element's elements, a layout slot or a component root.

Properties

Plus the properties every element accepts: id, className, style, responsive, states, animation, visible, ariaLabel, attributes and more.

Example

{
  "type": "accordion",
  "open": true,
  "items": [
    { "title": "Delivery", "content": "2–3 working days." },
    {
      "title": "Returns",
      "elements": [{ "type": "link", "label": "Read the policy", "target": "/returns" }]
    }
  ]
}

open: true opens the first panel.

Expected output

The HTML IWC rendered for the example above (inside the page's content wrapper). Class names such as i807b63fc are generated per element for its scoped CSS.

<div class="iwc-page ipage" id="iwc-content">
  <div class="iwc-accordion i833ceb28">
    <details open>
      <summary>
        Delivery
      </summary>
      <div class="iwc-text">
        2–3 working days.
      </div>
    </details>
    <details>
      <summary>
        Returns
      </summary>
      <a class="iwc-link i94a529e8" href="/returns">Read the policy</a>
    </details>
  </div>
</div>

Data, conditions & styling

• Conditional rendering: "visible": {"auth": "signed-in"}, {"roles": ["admin"]} or an expression such as "=product.stock > 0". Decided on the server: hidden elements are never sent.
• Data binding: bind takes text from data (name, user.name, props.title, params.slug, state.cart.count); binds binds attributes. Containers become data-driven with data + item. See data binding.
• Styling: className for your stylesheets, style for CSS in JSON, states for hover/focus/active, animation for entrance motion. See the style property reference.
• Responsive behaviour: responsive applies CSS at or below a breakpoint ({"mobile": {"padding": "12px"}}); grids also take responsiveColumns.