78e7b1efe8
- move `usa-accordion` class to wrap all accordion elements - remove background color form `accordion` class and move it to atat specific class `accordion__header` - create class names for styling elements instead of relying on element type
31 lines
878 B
HTML
31 lines
878 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="{{ 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 %}
|