Accordion List

An accordion list is a hierarchical list where the root level is rendered as an accordion whith only one root item expanded at a time.

Each root item can be prefixed with a label which can be defined by the field title_prefix.

Unknown Style styleSignature

Accordion List

The following example of an accordionList can be created with the json string:

[{
  "id": 1,
  "title": "Item1",
  "children": [{
    "id": 2,
    "title": "Item1.1"
  }, {
    "id": 3,
    "title": "Item1.2",
    "children": [{
      "id": 4,
      "title": "Item1.2.1"
    }]
  }]
}, {
  "id": 5,
  "title": "Item2",
  "children": [{
     "id": 5,
     "title": "Item2.1"
  }]
}, {
  "id": 6,
  "title": "Item3",
  "children": [{
     "id": 7,
     "title": "Item3.1"
  }]
}]
TitlePrefix 1: Item1
TitlePrefix 2: Item2
TitlePrefix 3: Item3
Accrodion List with Links

If list items have the field url defined the items become links. As the root items are rendered as headings a link symbol is appened instead.

[{
  "id": 1,
  "title": "Item1",
  "url": "#",
  "children": [{
      "id": 2,
      "title": "Item1.1"
    },
    {
      "id": 3,
      "title": "Item1.2",
      "children": [{
          "id": 4,
          "title": "Item1.2.1",
          "url": "#"
        }]
    }]
},
{
  "id": 5,
  "title": "Item2",
  "url": "#",
  "children": [{
       "id": 5,
       "title": "Item2.1"
    }]
},
{
  "id": 6,
  "title": "Item3",
  "children": [{
       "id": 7,
       "title": "Item3.1",
       "url": "#"
    }]
}]
Accordion List without Link Symbol

As the root item is expandable, if it is a link it cannot be clicked itself. Therefore, by default a link symbol is appended. Alternatively, a new item can be introduced which links to the root item. The name of this new item is defined by the field label_root. Note that such an item is only rendered if the field url for the item is set.

The same example as above is used.

Item1
Item2
Item3