<!-- 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.