4e0af139cc
- modify Accordion component to be able to customize classes and tags that it uses to build markup - modify the shape of the object that the mock CSP returns for data that builds this section. - Also ensures that the CLINs TOs and CLINS are sorted - add appropriate css for styling
30 lines
847 B
HTML
30 lines
847 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="{{ 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 {{ content_classes }}"
|
|
v-bind:aria-hidden="isVisible ? 'false' : 'true'">
|
|
{{ caller() }}
|
|
</{{content_tag}}>
|
|
</{{wrapper_tag}}>
|
|
</accordion>
|
|
{% endmacro %} |