<!-- Default -->
<div class="accordion js-accordion is-open">
<button class="accordion_toggler blockLink blockLink-toggler js-accordion-toggle" id="control-1" aria-controls="region-1">
<span id="regionTitle-1">
Lorem ipsum
</span>
<span class="blockLink_icon" aria-hidden="true"></span>
</button>
<div class="accordion_body js-accordion-region" id="region-1" role="region" aria-labelledby="regionTitle-1" aria-expanded="true">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
</div>
</div>
<!-- Closed -->
<div class="accordion js-accordion">
<button class="accordion_toggler blockLink blockLink-toggler js-accordion-toggle" id="control-2" aria-controls="region-2">
<span id="regionTitle-2">
Lorem ipsum
</span>
<span class="blockLink_icon" aria-hidden="true"></span>
</button>
<div class="accordion_body js-accordion-region" id="region-2" role="region" aria-labelledby="regionTitle-2" aria-expanded="false">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>
</div>
</div>
<div class="accordion js-accordion{{#if isOpen}} is-open{{/if}}">
<button
class="accordion_toggler blockLink blockLink-toggler js-accordion-toggle"
id="control-{{id}}"
aria-controls="region-{{id}}"
>
<span id="regionTitle-{{id}}">
{{ label }}
</span>
<span class="blockLink_icon" aria-hidden="true"></span>
</button>
<div
class="accordion_body js-accordion-region"
id="region-{{id}}"
role="region"
aria-labelledby="regionTitle-{{id}}"
{{#if isOpen}}
aria-expanded="true"
{{ else }}
aria-expanded="false"
{{/if}}
>
{{{ htmlText }}}
</div>
</div>
/* Default */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"isOpen": true,
"id": "1"
}
/* Closed */
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"isOpen": null,
"id": "2"
}
Accordion elements are independent from each other.
To give users a hint about the possible interaction the first element should be open by default.