atst/templates/components/accordion.html

31 lines
892 B
HTML

{% macro Accordion(
title,
id,
wrapper_tag="div",
wrapper_classes="",
heading_tag="h2",
heading_classes="",
content_tag="div",
content_classes="") %}
<accordion v-cloak inline-template>
<{{wrapper_tag}} class="usa-accordion {{ 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 %}