The filter pattern is used to allow users to narrow down a list of items based on their preferences through the use of JavaScript.
It’s comprised of multiple components of which the visibility can be toggle by clicked the category buttons.
It can be seen in action at the instruments page on the BX Swiss website.
<a href="#" class="box">
<div class="media media--right text-bold">
<div class="media__visual">
<svg viewBox="0 0 24 24" class="icon icon--s ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#expand"></use>
</svg>
</div>
<div class="media__content">
Instrument
</div>
</div>
</a>
<div class="field visually-hidden">
<ol class="unstyled">
<li>
<input id="Instrument-0" type="radio" name="Instrument">
<label for="Instrument-0" class="">All</label>
</li>
<li>
<input id="Instrument-1" type="radio" name="Instrument">
<label for="Instrument-1" class="">Shares</label>
</li>
<li>
<input id="Instrument-2" type="radio" name="Instrument">
<label for="Instrument-2" class="">Funds</label>
</li>
</ol>
</div>
<a href="#" class="box box--minimal">
<div class="media media--right text-bold">
<div class="media__visual">
<svg viewBox="0 0 24 24" class="icon icon--s is-flipped">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#expand"></use>
</svg>
</div>
<div class="media__content">
Country
</div>
</div>
</a>
<div class="field">
<ol class="unstyled">
<li>
<input id="Country-0" type="checkbox" name="Country">
<label for="Country-0" class="">Belgium</label>
</li>
<li>
<input id="Country-1" type="checkbox" name="Country">
<label for="Country-1" class="">France</label>
</li>
<li>
<input id="Country-2" type="checkbox" name="Country">
<label for="Country-2" class="">Germany</label>
</li>
<li>
<input id="Country-3" type="checkbox" name="Country">
<label for="Country-3" class="">Japan</label>
</li>
<li>
<input id="Country-4" type="checkbox" name="Country">
<label for="Country-4" class="">Netherlands</label>
</li>
<li>
<input id="Country-5" type="checkbox" name="Country">
<label for="Country-5" class="">Singapore</label>
</li>
<li>
<input id="Country-6" type="checkbox" name="Country">
<label for="Country-6" class="">Switzerland</label>
</li>
<li>
<input id="Country-7" type="checkbox" name="Country">
<label for="Country-7" class="">United States</label>
</li>
</ol>
</div>
<a href="#" class="box box--minimal">
<div class="media media--right text-bold">
<div class="media__visual">
<svg viewBox="0 0 24 24" class="icon icon--s ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#expand"></use>
</svg>
</div>
<div class="media__content">
Sector
</div>
</div>
</a>
<div class="field visually-hidden">
<ol class="unstyled">
<li>
<input id="Sector-0" type="checkbox" name="Sector">
<label for="Sector-0" class="">Commercial Services</label>
</li>
<li>
<input id="Sector-1" type="checkbox" name="Sector">
<label for="Sector-1" class="">Finance</label>
</li>
<li>
<input id="Sector-2" type="checkbox" name="Sector">
<label for="Sector-2" class="">Miscellaneous</label>
</li>
<li>
<input id="Sector-3" type="checkbox" name="Sector">
<label for="Sector-3" class="">Retail Trade</label>
</li>
</ol>
</div>
<a href="#" class="box box--minimal">
<div class="media media--right text-bold">
<div class="media__visual">
<svg viewBox="0 0 24 24" class="icon icon--s ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#expand"></use>
</svg>
</div>
<div class="media__content">
Status
</div>
</div>
</a>
<div class="field visually-hidden">
<ol class="unstyled">
<li>
<input id="Status-0" type="radio" name="Status">
<label for="Status-0" class="">All</label>
</li>
<li>
<input id="Status-1" type="radio" name="Status">
<label for="Status-1" class="">Tradable</label>
</li>
<li>
<input id="Status-2" type="radio" name="Status">
<label for="Status-2" class="">Suspended</label>
</li>
</ol>
</div>
<a href="#" class="box box--minimal">
<div class="media media--right">
<div class="media__visual">
<svg viewBox="0 0 24 24" class="icon icon--s ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#close"></use>
</svg>
</div>
<div class="media__content">
Reset filters
</div>
</div>
</a>
{{#each filter}}
<a href="#" class="box{{#unless @first}} box--minimal{{/unless}}">
{{> @media modifier="media--right text-bold" text=title icon="expand" iconClass=iconClass}}
</a>
<div class="field{{#unless isActive}} visually-hidden{{/unless}}">
<ol class="unstyled">
{{#each items}}
<li>
{{> @input type=../type name=../title id=(concat ../title '-' @index)}}
{{> @form-label text=this id=(concat ../title '-' @index)}}
</li>
{{/each}}
</ol>
</div>
{{/each}}
<a href="#" class="box box--minimal">
{{> @media modifier="media--right" text="Reset filters" icon="close"}}
</a>
{
"filter": [
{
"title": "Instrument",
"type": "radio",
"items": [
"All",
"Shares",
"Funds"
]
},
{
"title": "Country",
"type": "checkbox",
"iconClass": "is-flipped",
"isActive": true,
"items": [
"Belgium",
"France",
"Germany",
"Japan",
"Netherlands",
"Singapore",
"Switzerland",
"United States"
]
},
{
"title": "Sector",
"type": "checkbox",
"items": [
"Commercial Services",
"Finance",
"Miscellaneous",
"Retail Trade"
]
},
{
"title": "Status",
"type": "radio",
"items": [
"All",
"Tradable",
"Suspended"
]
}
]
}