{ "component": "accordion", "fixtures": [ { "name": "default", "options": { "id": "default-example", "items": [ { "heading": { "text": "Section A" }, "content": { "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post." } }, { "heading": { "text": "Section B" }, "content": { "html": "\n" } } ] }, "hidden": false, "description": "", "pageTemplateOptions": {}, "screenshot": { "variants": [ "default", "no-js" ] }, "html": "
\n
\n
\n

\n \n Section A\n \n

\n
\n
\n

\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n

\n
\n
\n
\n
\n

\n \n Section B\n \n

\n
\n
\n
    \n
  • Example item 2
    • \n
\n
\n
\n
" }, { "name": "with additional descriptions", "options": { "id": "with-descriptions", "items": [ { "heading": { "text": "Test" }, "summary": { "text": "Additional description" }, "content": { "html": "

\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n

\n\n" } }, { "heading": { "text": "Test 2" }, "summary": { "html": "Additional description (wrapped in span)" }, "content": { "html": "\n" } } ] }, "hidden": false, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Test\n \n

\n
\n Additional description\n
\n
\n
\n

\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n

\n
    \n
  • Example item 1
    • \n
\n
\n
\n
\n
\n

\n \n Test 2\n \n

\n
\n Additional description (wrapped in span)\n
\n
\n
\n
    \n
  • Example item 2
    • \n
\n
\n
\n
" }, { "name": "with long content and description", "options": { "id": "with-long-content-and-description", "items": [ { "heading": { "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor." }, "summary": { "text": "Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem." }, "content": { "html": "\n" } }, { "heading": { "text": "Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum." }, "summary": { "html": "Maecenas nec est sapien. Etiam varius luctus mauris non porttitor. " }, "content": { "html": "\n" } } ] }, "hidden": false, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis tortor porttitor.\n \n

\n
\n Etiam diam dui, tempus ut pharetra in, aliquet non dui. Nunc pulvinar maximus tortor, ac finibus augue congue vitae. Donec sed cursus lorem.\n
\n
\n
\n
    \n
  • Example item 1
    • \n
\n
\n
\n
\n
\n

\n \n Praesent faucibus leo feugiat libero pharetra lacinia. Aliquam aliquet ante vitae mollis vestibulum.\n \n

\n
\n Maecenas nec est sapien. Etiam varius luctus mauris non porttitor. \n
\n
\n
\n
    \n
  • Example item 2
    • \n
\n
\n
\n
" }, { "name": "with all sections already open", "options": { "id": "all-sections-open-example", "items": [ { "heading": { "text": "Section A" }, "expanded": true, "content": { "html": "\n" } }, { "heading": { "text": "Section B" }, "expanded": true, "content": { "html": "\n" } } ] }, "hidden": false, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Section A\n \n

\n
\n
\n
    \n
  • Example item 1
    • \n
\n
\n
\n
\n
\n

\n \n Section B\n \n

\n
\n
\n
    \n
  • Example item 2
    • \n
\n
\n
\n
" }, { "name": "classes", "options": { "id": "accordion-classes", "classes": "myClass", "items": [ { "heading": { "text": "Section A" }, "content": { "text": "Some content" } } ] }, "hidden": true, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Section A\n \n

\n
\n
\n

\n Some content\n

\n
\n
\n
" }, { "name": "attributes", "options": { "id": "accordion-attributes", "attributes": { "data-attribute": "value" }, "items": [ { "heading": { "text": "Section A" }, "content": { "text": "Some content" } } ] }, "hidden": true, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Section A\n \n

\n
\n
\n

\n Some content\n

\n
\n
\n
" }, { "name": "custom heading level", "options": { "id": "accordion-heading", "headingLevel": 3, "items": [ { "heading": { "text": "Section A" }, "content": { "text": "Some content" } } ] }, "hidden": true, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Section A\n \n

\n
\n
\n

\n Some content\n

\n
\n
\n
" }, { "name": "heading html", "options": { "id": "accordion-heading-html", "items": [ { "heading": { "html": "Section A" }, "content": { "text": "Some content" } } ] }, "hidden": true, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Section A\n \n

\n
\n
\n

\n Some content\n

\n
\n
\n
" }, { "name": "with falsy values", "options": { "id": "accordion-falsy", "items": [ { "heading": { "text": "Section A" }, "content": { "text": "Some content" } }, false, "", null, { "heading": { "text": "Section B" }, "content": { "text": "Some content" } } ] }, "hidden": true, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Section A\n \n

\n
\n
\n

\n Some content\n

\n
\n
\n
\n
\n

\n \n Section B\n \n

\n
\n
\n

\n Some content\n

\n
\n
\n
" }, { "name": "with remember expanded off", "options": { "id": "accordion-remember-expanded-off", "rememberExpanded": false, "items": [ { "heading": { "text": "Section A" }, "content": { "text": "Some content" } } ] }, "hidden": true, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Section A\n \n

\n
\n
\n

\n Some content\n

\n
\n
\n
" }, { "name": "with focusable elements inside", "options": { "id": "with-focusable-elements", "items": [ { "heading": { "text": "Section A" }, "content": { "html": "Link A" } }, { "heading": { "text": "Section B" }, "content": { "html": "Link B" } } ] }, "hidden": true, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Section A\n \n

\n
\n
\n Link A\n
\n
\n
\n
\n

\n \n Section B\n \n

\n
\n
\n Link B\n
\n
\n
" }, { "name": "with one section open", "options": { "id": "one-section-open-example", "items": [ { "heading": { "text": "Section A" }, "expanded": true, "content": { "html": "\n" } }, { "heading": { "text": "Section B" }, "content": { "html": "\n" } } ] }, "hidden": true, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Section A\n \n

\n
\n
\n
    \n
  • Example item 1
    • \n
\n
\n
\n
\n
\n

\n \n Section B\n \n

\n
\n
\n
    \n
  • Example item 2
    • \n
\n
\n
\n
" }, { "name": "with translations", "options": { "id": "with-translations", "hideAllSectionsText": "Collapse all sections", "showAllSectionsText": "Expand all sections", "hideSectionText": "Collapse", "hideSectionAriaLabelText": "Collapse this section", "showSectionText": "Expand", "showSectionAriaLabelText": "Expand this section", "items": [ { "heading": { "text": "Section A" }, "content": { "text": "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post." } }, { "heading": { "text": "Section B" }, "content": { "html": "\n" } } ] }, "hidden": true, "description": "", "pageTemplateOptions": {}, "screenshot": false, "html": "
\n
\n
\n

\n \n Section A\n \n

\n
\n
\n

\n We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n

\n
\n
\n
\n
\n

\n \n Section B\n \n

\n
\n
\n
    \n
  • Example item 2
    • \n
\n
\n
\n
" } ] }