{% macro Accordion(
  title,
  id,
  wrapper_tag="div",
  wrapper_classes="",
  heading_tag="h2",
  heading_classes="",
  content_tag="div",
  content_classes="",
  default_visible=False) %}
  <accordion
    v-cloak
    inline-template
    v-bind:default-visible='{{ default_visible | string | lower }}'>
    <{{wrapper_tag}} class="{{ wrapper_classes }}">
      <{{heading_tag}} class="accordion__button {{ heading_classes }}">
        <button
          v-on:click="toggle($event)"
          class="usa-accordion-button"
          aria-controls="{{ id }}"
          v-bind:aria-expanded= "isVisible ? 'true' : 'false'"
        >
          {{ title }}
        </button>
      </{{heading_tag}}>
      <{{content_tag}}
        id="{{ id }}"
        class="usa-accordion-content accordion__content {{ content_classes }}"
        v-bind:aria-hidden="isVisible ? 'false' : 'true'">
        {{ caller() }}
      </{{content_tag}}>
    </{{wrapper_tag}}>
  </accordion>
{% endmacro %}