accordion.hbs

<div class="au-c-accordion {{this.skin}} {{this.reverse}}" ...attributes>
  <AuToolbar
    @nowrap={{true}}
    @reverse={{@reverse}}
    {{on "click" this.toggleAccordion}}
    data-test-accordion-toggle
    as |Group|
  >
    <Group>
      <div>
        <AuButton
          @skin="link"
          aria-expanded="{{if this.isOpen 'true' 'false'}}"
          data-test-accordion-button
        >
          {{@buttonLabel}}
        </AuButton>
        {{#if @subtitle}}
          <p data-test-accordion-subtitle>
            {{@subtitle}}
          </p>
        {{/if}}
      </div>
    </Group>
    <Group>
      {{#if this.isOpen}}
        <AuIcon
          @icon={{this.iconOpen}}
          @alignment="left"
          @size="large"
          @ariaHidden={{true}}
          data-test-accordion-icon-open={{this.iconOpen}}
        />
      {{else}}
        <AuIcon
          @icon={{this.iconClosed}}
          @alignment="left"
          @size="large"
          @ariaHidden={{true}}
          data-test-accordion-icon-closed={{this.iconClosed}}
        />
      {{/if}}
    </Group>
  </AuToolbar>
  {{#if this.isOpen}}
    <AuContent tabindex="0" data-test-accordion-content>
      {{#if this.loading}}
        <AuLoader data-test-accordion-loader @hideMessage={{true}} />
      {{else}}
        {{yield}}
      {{/if}}
    </AuContent>
  {{/if}}
</div>