<!-- Filter -->
<div class="filter">
<div class="filter_inner">
<form class="filter_tools" action="#" method="get">
<div class="fs-row fs-lg-justify-center">
<div class="fs-cell fs-lg-10">
<div class="filter_tools_inner">
<div class="filter_tool theme_">
<label class="filter_tool_label" for="filter_tool_label_"></label>
<div class="filter_tool_select_wrapper">
<!-- 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-3-1 tool_accordion_item theme_yellow">
<button class="js-tool-accordion-swap js-swap tool_accordion_item_heading_button" data-swap-target=".js-tool-accordion-item-3-1" data-swap-group="tool_accordion-group-3">
<span class="tool_accordion_item_heading_inner">
<span class="tool_accordion_item_heading_label">
<span class="tool_accordion_item_heading_title">Topics</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="Topics">
<div class="tool_accordion_item_link_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="tool_accordion_item_link" href="digital-equity">
<div class="tool_accordion_item_link_inner">
<span class="tool_accordion_item_link_label">Digital Equity</span>
</div>
</a>
</div>
<div class="tool_accordion_item_link_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" data-label="Physical Health" data-index="1">
<span class="filter_tool_checkbox_symbol"></span>
</span>
</label>
<a class="tool_accordion_item_link" href="physical-health">
<div class="tool_accordion_item_link_inner">
<span class="tool_accordion_item_link_label">Physical Health</span>
</div>
</a>
</div>
<div class="tool_accordion_item_link_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="tool_accordion_item_link" href="social-media">
<div class="tool_accordion_item_link_inner">
<span class="tool_accordion_item_link_label">Social Media</span>
</div>
</a>
</div>
</div>
</div>
<div class="js-tool-accordion-item fs-swap-enabled js-tool-accordion-item-3-2 tool_accordion_item theme_salmon">
<button class="js-tool-accordion-swap js-swap tool_accordion_item_heading_button" data-swap-target=".js-tool-accordion-item-3-2" data-swap-group="tool_accordion-group-3">
<span class="tool_accordion_item_heading_inner">
<span class="tool_accordion_item_heading_label">
<span class="tool_accordion_item_heading_title">Ages & Stages</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="Ages & Stages">
<div class="tool_accordion_item_link_wrapper">
<label class="filter_tool_checkbox">
<span class="filter_tool_label_wrapper">
<span class="filter_tool_label">3-5 yrs Preschooler</span>
</span>
<span class="filter_tool_checkbox_wrapper">
<input class="filter_tool_checkbox_input" type="checkbox" name="preschooler" id="filter_tool_checkbox-preschooler" value="preschooler" data-label="3-5 yrs Preschooler" data-index="0">
<span class="filter_tool_checkbox_symbol"></span>
</span>
</label>
<a class="tool_accordion_item_link" href="preschooler">
<div class="tool_accordion_item_link_inner">
<span class="tool_accordion_item_link_label">3-5 yrs Preschooler</span>
</div>
</a>
</div>
<div class="tool_accordion_item_link_wrapper">
<label class="filter_tool_checkbox">
<span class="filter_tool_label_wrapper">
<span class="filter_tool_label">11-13 yrs Middle</span>
</span>
<span class="filter_tool_checkbox_wrapper">
<input class="filter_tool_checkbox_input" type="checkbox" name="middle" id="filter_tool_checkbox-middle" value="middle" data-label="11-13 yrs Middle" data-index="1">
<span class="filter_tool_checkbox_symbol"></span>
</span>
</label>
<a class="tool_accordion_item_link" href="middle">
<div class="tool_accordion_item_link_inner">
<span class="tool_accordion_item_link_label">11-13 yrs Middle</span>
</div>
</a>
</div>
<div class="tool_accordion_item_link_wrapper">
<label class="filter_tool_checkbox">
<span class="filter_tool_label_wrapper">
<span class="filter_tool_label">14-18 yrs High School</span>
</span>
<span class="filter_tool_checkbox_wrapper">
<input class="filter_tool_checkbox_input" type="checkbox" name="high-school" id="filter_tool_checkbox-high-school" value="high-school" data-label="14-18 yrs High School" data-index="2">
<span class="filter_tool_checkbox_symbol"></span>
</span>
</label>
<a class="tool_accordion_item_link" href="high-school">
<div class="tool_accordion_item_link_inner">
<span class="tool_accordion_item_link_label">14-18 yrs High School</span>
</div>
</a>
</div>
</div>
</div>
<div class="js-tool-accordion-item fs-swap-enabled js-tool-accordion-item-3-3 tool_accordion_item theme_light_blue">
<button class="js-tool-accordion-swap js-swap tool_accordion_item_heading_button" data-swap-target=".js-tool-accordion-item-3-3" data-swap-group="tool_accordion-group-3">
<span class="tool_accordion_item_heading_inner">
<span class="tool_accordion_item_heading_label">
<span class="tool_accordion_item_heading_title">Formats</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="Formats">
<div class="tool_accordion_item_link_wrapper">
<label class="filter_tool_checkbox">
<span class="filter_tool_label_wrapper">
<span class="filter_tool_label">Tip Sheet</span>
</span>
<span class="filter_tool_checkbox_wrapper">
<input class="filter_tool_checkbox_input" type="checkbox" name="tip-sheet" id="filter_tool_checkbox-tip-sheet" value="tip-sheet" data-label="Tip Sheet" data-index="0">
<span class="filter_tool_checkbox_symbol"></span>
</span>
</label>
<a class="tool_accordion_item_link" href="tip-sheet">
<div class="tool_accordion_item_link_inner">
<span class="tool_accordion_item_link_label">Tip Sheet</span>
</div>
</a>
</div>
<div class="tool_accordion_item_link_wrapper">
<label class="filter_tool_checkbox">
<span class="filter_tool_label_wrapper">
<span class="filter_tool_label">Scholarly Article</span>
</span>
<span class="filter_tool_checkbox_wrapper">
<input class="filter_tool_checkbox_input" type="checkbox" name="scholarly-article" id="filter_tool_checkbox-scholarly-article" value="scholarly-article" data-label="Scholarly Article" data-index="1">
<span class="filter_tool_checkbox_symbol"></span>
</span>
</label>
<a class="tool_accordion_item_link" href="scholarly-article">
<div class="tool_accordion_item_link_inner">
<span class="tool_accordion_item_link_label">Scholarly Article</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: tool_accordion -->
</div>
</div>
<div class="filter_tool filter_tool_type_search">
<label class="filter_tool_label" for="filter_tool_search_input">Search</label>
<div class="filter_tool_search_wrapper">
<input class="filter_tool_search_input" id="filter_tool_search_input" placeholder="Keyword" type="search">
<div class="filter_tool_search_submit">
<span class="filter_tool_search_submit_inner">
<span class="filter_tool_search_submit_label">Submit</span>
<span class="filter_tool_search_submit_icon">
<svg class="icon icon_search">
<use href="/images/icons.svg#search" />
</svg>
</span>
</span>
</div>
</div>
</div>
<div class="filter_tool">
<button class="filter_tool_submit theme_dark_gray" type="submit">
<span class="filter_tool_submit_inner">
<span class="filter_tool_submit_label">Submit</span>
</span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- END: Filter -->
{#
{% include '@partial-filter' with {
label: 'Directory',
active: 'search',
action_category: '#',
action_search: '#',
tools: [
{
label: 'Category',
options: [
{
label: 'All Categories',
label: true
}
]
}
],
search_placeholder: 'Placeholder',
results: '',
category: ''
} %}
#}
<!-- Filter -->
<div class="filter">
<div class="filter_inner">
<form class="filter_tools" action="{{ action_category }}" method="get">
<div class="fs-row fs-lg-justify-center">
<div class="fs-cell fs-lg-10">
<div class="filter_tools_inner">
<div class="filter_tool theme_{{ tool.theme }}">
<label class="filter_tool_label" for="filter_tool_label_{{ loop.index }}">{{ tool.label }}</label>
<div class="filter_tool_select_wrapper">
{% include '@navigation-tool-accordion' with {
title: '',
description: '',
grouped: true,
items: tools,
theme:'default'
} %}
</div>
</div>
<div class="filter_tool filter_tool_type_search">
<label class="filter_tool_label" for="filter_tool_search_input">Search</label>
<div class="filter_tool_search_wrapper">
<input class="filter_tool_search_input" id="filter_tool_search_input" placeholder="{{ search_placeholder }}" type="search">
<div class="filter_tool_search_submit">
<span class="filter_tool_search_submit_inner">
<span class="filter_tool_search_submit_label">Submit</span>
<span class="filter_tool_search_submit_icon">{{ icon('search') }}</span>
</span>
</div>
</div>
</div>
<div class="filter_tool">
<button class="filter_tool_submit theme_dark_gray" type="submit">
<span class="filter_tool_submit_inner">
<span class="filter_tool_submit_label">Submit</span>
</span>
</button>
</div>
</div>
</div>
</div>
</form>
{% if results != '' %}
{% include '@partial-filter-results' with {
category: '',
results:results,
reset_action: {
class: 'filter_results_reset',
title: reset_action.title,
url: reset_action.url,
icon: reset_action.icon
}
} %}
{% endif %}
</div>
</div>
<!-- END: Filter -->
No notes defined.