Last modified: Nov 10, 2024

Accordion

A component that allows you to group content into collapsible sections.

🚧 This documentation is a work in progress.

Usage

The Accordion component allows users to expand and collapse content sections by clicking on the header, allowing for a space-efficient and organized way to present information.

Anatomy

Accordion closed anatomy
Closed Accordion

Accordion open anatomy
Open Accordion

  1. Header: The clickable section title that users interact with to expand or collapse the content.
  2. Content Area: The area that expands or collapses, revealing or hiding additional information when the header is clicked.

Properties

PropertyTypeDescription
childrenarrayAn array with the component ID of all components belonging to the group. Enum: "Paragraph" | "Button"
textResourceBindings.titlestringClickable section title

Configuration

Add component

You can add a component in Altinn Studio Designer by dragging it from the left-side panel to the middle page area. Selecting the component brings up its configuration panel on the right-hand side.

Settings in Altinn Studio Designer

We are currently updating Altinn Studio with more configuration options! The documentation is continuously updated, but more settings may be available than described here, and some settings may be in beta.

    Property settings available in Altinn Studio Designer.

    NB! The property children is required and must be added manually.

    Accordion settings in Altinn Studio
    Settings for Accordion in Altinn Studio

    • Komponent-ID (id): Automatically generated component ID (editable).

    Corresponding settings in the page’s JSON file.

    App/ui/layouts/{page}.json
    ...

{
  "data": {
    "layout": [
       {
        "id": "Accordion-3uoJMS",
        "type": "Accordion"
      }
    ]
  }
}

    Add title and elements


    textResourceBindings.title

    The title for the Accordion can be added as text directly or referenced via a text key to a text resource.

    children

    Specify which components you want to expand by adding their IDs to an array under children.

    The following types can be added to an Accordion:

    • Paragraph
    • Button

    Example

    Accordion with a paragraph and a button as child elements.

      App/ui/layouts/{page}.json
      ...

{
  "data": {
    "layout": [
       {
        "id": "Accordion-3uoJMS",
        "type": "Accordion",
        "textResourceBindings": {
          "title": "Lorem ipsum"
        },
        "children": ["lorem-ipsum", "ok-button"]
      },
      {
        "id": "lorem-ipsum",
        "type": "Paragraph",
        "textResourceBindings": {
          "title": "Paragraph.loremIpsum1"
        },
        "dataModelBindings": {}
      },
      {
        "id": "ok-button",
        "type": "Button",
        "dataModelBindings": {},
        "textResourceBindings": {
          "title": "OK"
        }
      }
    ]
  }
}

      Accordion example
      Accordion with paragraph and button

      Heading Level

      The default heading level is 2. To change it, add the headingLevel property as shown in the code example below. headingLevel can take values of 2 | 3 | 4 | 5 | 6.

        App/ui/layouts/{page}.json
        ...

{
  "data": {
    "layout": [
       {
        "id": "Accordion-3uoJMS",
        "type": "Accordion",
        "textResourceBindings": {
          "title": "Lorem ipsum"
        },
        "children": ["lorem-ipsum", "ok-button"],
        "headingLevel": 3
      },
      ...
    ]
  }
}