<!-- tool_accordion -->
<div class="js-tool-accordion tool_accordion">
<div class="tool_accordion_inner">
<div class="tool_accordion_items">
<div class="js-tool-accordion-item fs-swap-enabled js-tool-accordion-item-1-1 tool_accordion_item theme_">
<button class="js-tool-accordion-swap js-swap tool_accordion_item_heading_button" data-swap-target=".js-tool-accordion-item-1-1">
<span class="tool_accordion_item_heading_inner">
<span class="tool_accordion_item_heading_label">
<span class="tool_accordion_item_heading_title"></span>
</span>
<span class="tool_accordion_item_heading_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
<span class="tool_accordion_item_heading_icon tool_accordion_item_heading_icon_active" aria-hidden="true">
<svg class="icon icon_caret_up">
<use href="/images/icons.svg#caret_up" />
</svg>
</span>
</span>
</button>
<div class="js-tool-accordion-content tool_accordion_item_content" aria-label=" Quam Bibendum Pellentesque Tellus">
</div>
</div>
<div class="js-tool-accordion-item fs-swap-enabled js-tool-accordion-item-1-2 tool_accordion_item theme_">
<button class="js-tool-accordion-swap js-swap tool_accordion_item_heading_button" data-swap-target=".js-tool-accordion-item-1-2">
<span class="tool_accordion_item_heading_inner">
<span class="tool_accordion_item_heading_label">
<span class="tool_accordion_item_heading_title"></span>
</span>
<span class="tool_accordion_item_heading_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
<span class="tool_accordion_item_heading_icon tool_accordion_item_heading_icon_active" aria-hidden="true">
<svg class="icon icon_caret_up">
<use href="/images/icons.svg#caret_up" />
</svg>
</span>
</span>
</button>
<div class="js-tool-accordion-content tool_accordion_item_content" aria-label=" Quam Bibendum Pellentesque Tellus">
</div>
</div>
<div class="js-tool-accordion-item fs-swap-enabled js-tool-accordion-item-1-3 tool_accordion_item theme_">
<button class="js-tool-accordion-swap js-swap tool_accordion_item_heading_button" data-swap-target=".js-tool-accordion-item-1-3">
<span class="tool_accordion_item_heading_inner">
<span class="tool_accordion_item_heading_label">
<span class="tool_accordion_item_heading_title"></span>
</span>
<span class="tool_accordion_item_heading_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
<span class="tool_accordion_item_heading_icon tool_accordion_item_heading_icon_active" aria-hidden="true">
<svg class="icon icon_caret_up">
<use href="/images/icons.svg#caret_up" />
</svg>
</span>
</span>
</button>
<div class="js-tool-accordion-content tool_accordion_item_content" aria-label="">
</div>
</div>
<div class="js-tool-accordion-item fs-swap-enabled js-tool-accordion-item-1-4 tool_accordion_item theme_">
<button class="js-tool-accordion-swap js-swap tool_accordion_item_heading_button" data-swap-target=".js-tool-accordion-item-1-4">
<span class="tool_accordion_item_heading_inner">
<span class="tool_accordion_item_heading_label">
<span class="tool_accordion_item_heading_title"></span>
</span>
<span class="tool_accordion_item_heading_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
<span class="tool_accordion_item_heading_icon tool_accordion_item_heading_icon_active" aria-hidden="true">
<svg class="icon icon_caret_up">
<use href="/images/icons.svg#caret_up" />
</svg>
</span>
</span>
</button>
<div class="js-tool-accordion-content tool_accordion_item_content" aria-label=" Quam Bibendum Pellentesque Tellus">
</div>
</div>
<div class="js-tool-accordion-item fs-swap-enabled js-tool-accordion-item-1-5 tool_accordion_item theme_">
<button class="js-tool-accordion-swap js-swap tool_accordion_item_heading_button" data-swap-target=".js-tool-accordion-item-1-5">
<span class="tool_accordion_item_heading_inner">
<span class="tool_accordion_item_heading_label">
<span class="tool_accordion_item_heading_title"></span>
</span>
<span class="tool_accordion_item_heading_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
<span class="tool_accordion_item_heading_icon tool_accordion_item_heading_icon_active" aria-hidden="true">
<svg class="icon icon_caret_up">
<use href="/images/icons.svg#caret_up" />
</svg>
</span>
</span>
</button>
<div class="js-tool-accordion-content tool_accordion_item_content" aria-label=" Quam Bibendum Pellentesque Tellus">
</div>
</div>
<div class="js-tool-accordion-item fs-swap-enabled js-tool-accordion-item-1-6 tool_accordion_item theme_">
<button class="js-tool-accordion-swap js-swap tool_accordion_item_heading_button" data-swap-target=".js-tool-accordion-item-1-6">
<span class="tool_accordion_item_heading_inner">
<span class="tool_accordion_item_heading_label">
<span class="tool_accordion_item_heading_title"></span>
</span>
<span class="tool_accordion_item_heading_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
<span class="tool_accordion_item_heading_icon tool_accordion_item_heading_icon_active" aria-hidden="true">
<svg class="icon icon_caret_up">
<use href="/images/icons.svg#caret_up" />
</svg>
</span>
</span>
</button>
<div class="js-tool-accordion-content tool_accordion_item_content" aria-label="">
</div>
</div>
<div class="js-tool-accordion-item fs-swap-enabled js-tool-accordion-item-1-7 tool_accordion_item theme_">
<button class="js-tool-accordion-swap js-swap tool_accordion_item_heading_button" data-swap-target=".js-tool-accordion-item-1-7">
<span class="tool_accordion_item_heading_inner">
<span class="tool_accordion_item_heading_label">
<span class="tool_accordion_item_heading_title"></span>
</span>
<span class="tool_accordion_item_heading_icon">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
<span class="tool_accordion_item_heading_icon tool_accordion_item_heading_icon_active" aria-hidden="true">
<svg class="icon icon_caret_up">
<use href="/images/icons.svg#caret_up" />
</svg>
</span>
</span>
</button>
<div class="js-tool-accordion-content tool_accordion_item_content" aria-label=" Quam Bibendum Pellentesque Tellus">
</div>
</div>
</div>
</div>
</div>
<!-- END: tool_accordion -->
{#
{% include '@component-tool_accordion' with {
title: 'Title',
description: 'Description',
grouped: false,
items: [
{
title: 'Item Title',
subtitle: 'Item Subtitle',
description: '<p>Item Description</p>',
link:{
url:'#',
title:'Read Our Mission',
aria_label:'Item aria label'
}
}
],
theme:'default'
} %}
#}
{% set id = uniqid('js-tool-accordion-item') %}
{% set group_id = uniqid('tool_accordion-group') %}
<!-- tool_accordion -->
<div class="js-tool-accordion tool_accordion">
<div class="tool_accordion_inner">
<div class="tool_accordion_items">
{% for item in items %}
{% set theme = get_theme_key(color_patterns.ternary, loop.index0) %}
<div class="js-tool-accordion-item fs-swap-enabled {{ id }}-{{ loop.index }} tool_accordion_item theme_{{ item.theme }}">
<button class="js-tool-accordion-swap js-swap tool_accordion_item_heading_button" data-swap-target=".{{ id }}-{{ loop.index }}" {% if grouped %} data-swap-group="{{ group_id }}" {% endif %}>
<span class="tool_accordion_item_heading_inner">
<span class="tool_accordion_item_heading_label">
<span class="tool_accordion_item_heading_title">{{ item.label }}</span>
</span>
<span class="tool_accordion_item_heading_icon">{{ icon('caret_down') }}</span>
<span class="tool_accordion_item_heading_icon tool_accordion_item_heading_icon_active" aria-hidden="true">
{{ icon('caret_up') }}
</span>
</span>
</button>
<div class="js-tool-accordion-content tool_accordion_item_content" aria-label="{{ item.label }}{% if item.subtitle %} {{ item.subtitle }}{% endif %}">
{% for child in item.options %}
<div class="tool_accordion_item_link_wrapper">
{% include '@partial-filter-checkbox' with {
label: child.label,
selected:child.selected ?: false,
value:child.value ?: '#',
theme:item.theme
} %}
<a class="tool_accordion_item_link" href="{{ child.value ?: '#' }}">
<div class="tool_accordion_item_link_inner">
{% if child_icon %}
<span class="tool_accordion_item_link_icon" aria-hidden="true">{{ icon(child_icon) }}</span>
{% endif %}
<span class="tool_accordion_item_link_label">{{ child.label ?: child }}</span>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- END: tool_accordion -->
No notes defined.