This component requires javascript.
<div class="c-accordion">
<h3 class="c-accordion__title">
<button class="c-accordion__tab | js-accordion-tab" id="tab-0" aria-expanded="false" aria-controls="tab-content-0">Accordion Title</button>
</h3>
<div class="c-accordion__content o-textstyles" id="tab-content-0" aria-hidden="true" aria-labelledby="tab-0">
<p>Use accordions to progressively disclose further sections of information, which otherwise might result in a very long or unscannable page.</p>
</div>
<h3 class="c-accordion__title">
<button class="c-accordion__tab | js-accordion-tab" id="tab-1" aria-expanded="false" aria-controls="tab-content-1">Prohibited use</button>
</h3>
<div class="c-accordion__content o-textstyles" id="tab-content-1" aria-hidden="true" aria-labelledby="tab-1">
<p>You agree to use the Websites only for lawful purposes and in a considerate and responsible way that does not infringe the rights of, restrict or inhibit anyone else’s use and enjoyment of the Websites.</p>
<p>You agree not to use the Websites:</p>
<ul>
<li>for any purpose that is against the law;</li>
<li>in any way that causes interruption or damage to the online services or renders them impaired or less efficient;</li>
<li>for collecting data about other users;</li>
</ul>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
smgwds.accordions();
})
</script>
<div class="c-accordion">
{{#each accordions }}
<h3 class="c-accordion__title">
<button class="c-accordion__tab | js-accordion-tab" id="tab-{{ @index }}" aria-expanded="false"
aria-controls="tab-content-{{ @index }}">{{ this.title }}</button>
</h3>
<div class="c-accordion__content o-textstyles" id="tab-content-{{ @index }}" aria-hidden="true"
aria-labelledby="tab-{{ @index }}">
{{{ this.content }}}
</div>
{{/each}}
</div>{{{ init }}}