AccordionGroup
A component that lets you group Accordions
Usage
AccordionGroup
is used to group related Accordion
components.
Anatomy
- AccordionGroup: Grouping of two or more Accordion components.
- Header: The clickable section title that users interact with to expand or collapse the content.
- Content Area: The area that expands or collapses, revealing or hiding additional information when the header is clicked.
Note: Header and content area are properties of the Accordion
child elements.
Related
Properties
Property | Type | Description |
---|---|---|
children | array | An array with the component ID of all components belonging to the group. Enum: "Accordion" |
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
Property settings available in Altinn Studio Designer.
children
property must be added to the component’s code.
See Add child elements- Komponent-ID (
id
): Automatically generated component ID (editable).
Corresponding settings in the page’s JSON file.
children
property must be added to the component’s code.
See Add child elementsApp/ui/layouts/{page}.json
{
"data": {
"layout": [
{
"id": "accordion-group",
"type": "AccordionGroup"
}
]
}
}
Add child elements
Specify which components of type Accordion
you want to group by adding their component ID’s to the children
property as shown below.
The Accordion
components must be added to the same page.
The order of the components in the group is given by the order of the component ID’s in children
.
App/ui/layouts/{page}.json
...
{
"data": {
"layout": [
{
"id": "accordion-group",
"type": "AccordionGroup",
"children": [
"accordion1",
"accordion2"
]
},
...
]
}
}
...
Example
App/ui/layouts/{page}.json
{
"$schema": "https://altinncdn.no/toolkits/altinn-app-frontend/4/schemas/json/layout/layout.schema.v1.json",
"data": {
"layout": [
{
"id": "accordion-group",
"type": "AccordionGroup",
"children": [
"accordion1",
"accordion2"
]
},
{
"id": "accordion1",
"type": "Accordion",
"textResourceBindings": {
"title": "Lorem ipsum"
},
"children": [
"paragraph1",
"ok-button"
]
},
{
"id": "accordion2",
"type": "Accordion",
"textResourceBindings": {
"title": "To avsnitt"
},
"headingLevel": 2,
"children": [
"paragraph2",
"paragraph3"
]
},
{
"id": "paragraph1",
"type": "Paragraph",
"textResourceBindings": {
"title": "text.loremIpsum"
},
"dataModelBindings": {}
},
{
"id": "paragraph2",
"type": "Paragraph",
"textResourceBindings": {
"title": "Dette er et avsnitt."
},
"dataModelBindings": {}
},
{
"id": "paragraph3",
"type": "Paragraph",
"textResourceBindings": {
"title": "Dette er et annet avsnitt."
},
"dataModelBindings": {}
},
{
"id": "ok-button",
"type": "Button",
"dataModelBindings": {},
"textResourceBindings": {
"title": "OK"
}
}
]
}
}