<div class="js-nav-toggle-group js-filter-tool-nav-group js-filter-tool-nav-group- js-filter-tool-nav-group-demo toggle_nav_group filter_tool_nav_group filter_tool_nav_group_demo">
<button class="js-filter-tool-nav-toggle js-nav-toggle-button js-swap filter_tool_nav_toggle button_toggle theme_yellow" data-swap-target=".js-filter-tool-nav-group" data-swap-linked="topics">
<span class="filter_tool_nav_toggle_inner_default filter_tool_nav_toggle_inner button_toggle_inner_default button_toggle_inner">
<span class="filter_tool_nav_toggle_label_default filter_tool_nav_toggle_label button_toggle_label_default button_toggle_label">Topics</span>
<span class="filter_tool_nav_toggle_icon_default filter_tool_nav_toggle_icon button_toggle_icon_default button_toggle_icon" aria-hidden="true">
<svg class="icon icon_caret_down">
<use href="/images/icons.svg#caret_down" />
</svg>
</span>
</span>
<span class="filter_tool_nav_toggle_inner_active filter_tool_nav_toggle_inner button_toggle_inner_active button_toggle_inner">
<span class="filter_tool_nav_toggle_label_active filter_tool_nav_toggle_label button_toggle_label_active button_toggle_label">Topics</span>
<span class="filter_tool_nav_toggle_icon_active filter_tool_nav_toggle_icon button_toggle_icon_active button_toggle_icon" aria-hidden="true">
<svg class="icon icon_caret_up">
<use href="/images/icons.svg#caret_up" />
</svg>
</span>
</span>
</button>
<div class=" js-nav-toggle-panel js-filter-tool-nav-panel js-filter-tool-nav-panel-demo toggle_nav_panel filter_tool_nav_panel filter_tool_nav_panel_demo">
<nav class="js-nav-toggle js-filter-tool-nav js-filter-tool-nav-demo toggle_nav filter_tool_nav filter_tool_nav_demo" aria-labelledby="toggle_nav_title-3">
<div class="toggle_nav_header filter_tool_nav_header">
<h2 class="toggle_nav_title filter_tool_nav_title" id="toggle_nav_title-3">Topics</h2>
</div>
<ul class="js-nav-toggle-list js-filter-tool-nav-list toggle_nav_list filter_tool_nav_list" aria-labelledby="toggle_nav_title-3">
<li class="js-nav-toggle-item js-filter-tool-nav-item toggle_nav_item filter_tool_nav_item theme_yellow">
<div class="toggle_nav_item_wrapper filter_tool_nav_item_wrapper">
<label class="filter_tool_checkbox">
<span class="filter_tool_label_wrapper">
<span class="filter_tool_label">Digital Equity</span>
</span>
<span class="filter_tool_checkbox_wrapper">
<input class="filter_tool_checkbox_input" type="checkbox" name="digital-equity" id="filter_tool_checkbox-digital-equity" value="digital-equity" data-label="Digital Equity" data-index="0">
<span class="filter_tool_checkbox_symbol"></span>
</span>
</label>
<a class="js-nav-toggle-link js-filter-tool-nav-link toggle_nav_link filter_tool_nav_link" href="Digital Equity">
<div class="toggle_nav_link_inner filter_tool_nav_link_inner">
<span class="filter_tool_nav_link_label">Digital Equity</span>
</div>
</a>
</div>
</li>
<li class="js-nav-toggle-item js-filter-tool-nav-item toggle_nav_item filter_tool_nav_item theme_yellow">
<div class="toggle_nav_item_wrapper filter_tool_nav_item_wrapper">
<label class="filter_tool_checkbox">
<span class="filter_tool_label_wrapper">
<span class="filter_tool_label">Physical Health</span>
</span>
<span class="filter_tool_checkbox_wrapper">
<input class="filter_tool_checkbox_input" type="checkbox" name="physical-health" id="filter_tool_checkbox-physical-health" value="physical-health" checked="checked" data-label="Physical Health" data-index="1">
<span class="filter_tool_checkbox_symbol"></span>
</span>
</label>
<a class="js-nav-toggle-link js-filter-tool-nav-link toggle_nav_link filter_tool_nav_link" href="Physical Health">
<div class="toggle_nav_link_inner filter_tool_nav_link_inner">
<span class="filter_tool_nav_link_label">Physical Health</span>
</div>
</a>
</div>
</li>
<li class="js-nav-toggle-item js-filter-tool-nav-item toggle_nav_item filter_tool_nav_item theme_yellow">
<div class="toggle_nav_item_wrapper filter_tool_nav_item_wrapper">
<label class="filter_tool_checkbox">
<span class="filter_tool_label_wrapper">
<span class="filter_tool_label">Social Media</span>
</span>
<span class="filter_tool_checkbox_wrapper">
<input class="filter_tool_checkbox_input" type="checkbox" name="social-media" id="filter_tool_checkbox-social-media" value="social-media" data-label="Social Media" data-index="2">
<span class="filter_tool_checkbox_symbol"></span>
</span>
</label>
<a class="js-nav-toggle-link js-filter-tool-nav-link toggle_nav_link filter_tool_nav_link" href="Social Media">
<div class="toggle_nav_link_inner filter_tool_nav_link_inner">
<span class="filter_tool_nav_link_label">Social Media</span>
</div>
</a>
</div>
</li>
</ul>
</nav>
</div>
</div>
{#
{% include '@navigation-tool-toggle' with {
class: 'class',
modifier: 'modifier',
title: 'Title',
links: [{ 'title': 'Page Title', 'url': '#', 'children': [] }],
icon: 'icon_item',
child_icon: 'icon_child',
color_pattern: color_patterns.ternary,
toggle: {
title: 'Toggle Button Title',
icon: 'toggle_button_icon',
title_active: 'Toggle Button Active Title',
icon_active: 'toggle_button_active_icon',
swap_target: '.swap_target',
swap_link: 'swap_link'
}
} %}
#}
{% set js_class = 'js-' ~ class|replace({ '_': '-' }) %}
{% set id = uniqid('toggle_nav_title') %}
<div class="js-nav-toggle-group {{ js_class }}-nav-group {{ js_class }}-nav-group-{{ index }} {% if modifier %} {{ js_class }}-nav-group-{{ modifier }}{% endif %} toggle_nav_group {{ class }}_nav_group{% if modifier %} {{ class }}_nav_group_{{ modifier }}{% endif %}">
{% include '@partial-button-toggle' with {
class: class ~ '_nav',
js_class: 'js-nav-toggle-button',
title: toggle.title,
icon: toggle.icon,
active_title: toggle.title_active,
active_icon: toggle.icon_active,
swap_target: toggle.swap_target,
swap_link: toggle.swap_link
} %}
<div class=" js-nav-toggle-panel {{ js_class }}-nav-panel{% if modifier %} {{ js_class }}-nav-panel-{{ modifier }}{% endif %} toggle_nav_panel {{ class }}_nav_panel{% if modifier %} {{ class }}_nav_panel_{{ modifier }}{% endif %}">
<nav class="js-nav-toggle {{ js_class }}-nav{% if modifier %} {{ js_class }}-nav-{{ modifier }}{% endif %} toggle_nav {{ class }}_nav{% if modifier %} {{ class }}_nav_{{ modifier }}{% endif %}" aria-labelledby="{{ id }}">
<div class="toggle_nav_header {{ class }}_nav_header">
<h2 class="toggle_nav_title {{ class }}_nav_title" id="{{ id }}">{{ title }}</h2>
</div>
<ul class="js-nav-toggle-list {{ js_class }}-nav-list toggle_nav_list {{ class }}_nav_list" aria-labelledby="{{ id }}">
{% for link in links %}
<li class="js-nav-toggle-item {{ js_class }}-nav-item toggle_nav_item {{ class }}_nav_item theme_{{ theme }}">
<div class="toggle_nav_item_wrapper {{ class }}_nav_item_wrapper">
{% include '@partial-filter-checkbox' with {
label: link.label,
selected:link.selected ?: false,
value:link.value ?: '#',
theme:theme
} %}
<a class="js-nav-toggle-link {{ js_class }}-nav-link toggle_nav_link {{ class }}_nav_link" href="{{ link.label ?: '#' }}">
<div class="toggle_nav_link_inner {{ class }}_nav_link_inner">
{% if icon %}
<span class="toggle_nav_link_icon {{ class }}_nav_link_icon" aria-hidden="true">{{ icon(icon) }}</span>
{% endif %}
<span class="{{ class }}_nav_link_label">{{ link.label }}</span>
</div>
</a>
</div>
{% if link.children %}
<ul class="{{ class }}_nav_children" aria-label="{{ link.title ?: link }}">
{% for child in link.children %}
<li class="{{ class }}_nav_child_item">
{% include '@partial-filter-checkbox' with {
label: child.label,
selected:child.selected ?: false,
value:child.value ?: '#',
theme:''
} %}
<a class="{{ class }}_nav_child_link" href="{{ child.value ?: '#' }}">
<div class="{{ class }}_nav_child_link_inner">
{% if child_icon %}
<span class="{{ class }}_nav_child_link_icon" aria-hidden="true">{{ icon(child_icon) }}</span>
{% endif %}
<span class="toggle_nav_link_label {{ class }}_nav_link_label">{{ child.label ?: child }}</span>
</div>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>
</div>
No notes defined.