atst/templates/components/accordion.html

35 lines
979 B
HTML

{% 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 %}