Filters Sidebar Accordion
Collapsible Sections of the Available Filters
Filters Sidebar Accordion Component
Example of the accordions used in the sidebar containing the filter options.
<form action="#" method="post" class="lmp-form needs-validation" novalidate>
<div class="row pt-3 pt-lg-0">
<div class="col-auto">
<h4 id="pgFltrHead" class="mb-0">Filter By</h4>
</div>
<div class="col text-right">
<button class="btn lmp-link btn-sm">Reset Filters</button>
</div>
<div class="col-12 my-3">
<div class="animated-input">
<div class="input-group">
<input type="search" class="form-control" id="formInput-search" required>
<label for="formInput-search">Search Field Label</label>
<div class="input-group-append">
<button class="btn lmp-outline-primary border-left-0 border-lmp-input" type="button" id="filterSearchBtn">
<i class="lmp-icon icon-lg" aria-hidden="true">search</i>
<span class="sr-only">Search</span> </button>
</div>
</div>
</div>
</div>
</div>
<div class="accordion lmp-filter-accordions">
<div class="lmp-filter-item checkboxFilterExample">
<h5 id="checkboxFilterExampleHeading" class="mb-0 h6">
<button class="accordion-trigger collapsed" type="button" data-toggle="collapse" data-target="#checkboxFilterExample" aria-expanded="false" aria-controls="checkboxFilterExample">
Checkbox Filters
</button>
</h5>
<div id="checkboxFilterExample" class="accordion-collapse collapse" aria-labelledby="checkboxFilterExampleHeading">
<div class="accordion-content">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxOption1">
<label class="custom-control-label" for="ckbxOption1">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxOption2">
<label class="custom-control-label" for="ckbxOption2">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxOption3">
<label class="custom-control-label" for="ckbxOption3">Option 3</label>
</div>
<div id="filter-0" class="collapse">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxOption4">
<label class="custom-control-label" for="ckbxOption4">Option 4</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxOption5">
<label class="custom-control-label" for="ckbxOption5">Option 5</label>
</div>
</div>
<a href="#filter-0" class="lmp-filter-toggle" data-toggle="collapse" aria-expanded="false" aria-controls="filter-0">
<span class="more">Show More</span>
<span class="less">Show Less</span>
</a>
</div>
</div>
</div>
</div>
<div class="lmp-filter-item nestedCkbxFilterExample">
<h5 id="nestedCkbxFilterExampleHeading" class="mb-0 h6">
<button class="accordion-trigger collapsed" type="button" data-toggle="collapse" data-target="#nestedCkbxFilterExample" aria-expanded="false" aria-controls="nestedCkbxFilterExample">
Nested Checkbox Filters
</button>
</h5>
<div id="nestedCkbxFilterExample" class="accordion-collapse collapse" aria-labelledby="nestedCkbxFilterExampleHeading">
<div class="accordion-content">
<ul class="list-unstyled mb-0 form-check">
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption1">
<label class="custom-control-label" for="ckbxNstOption1">Option 1</label>
</div>
<ul class="list-unstyled pl-4">
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption1a">
<label class="custom-control-label" for="ckbxNstOption1a">Option 1A</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption1b">
<label class="custom-control-label" for="ckbxNstOption1b">Option 1B</label>
</div>
</li>
</ul>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption2">
<label class="custom-control-label" for="ckbxNstOption2">Option 2</label>
</div>
<ul class="list-unstyled pl-4">
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption2a">
<label class="custom-control-label" for="ckbxNstOption2a">Option 2A</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption2b">
<label class="custom-control-label" for="ckbxNstOption2b">Option 2B</label>
</div>
</li>
</ul>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption3">
<label class="custom-control-label" for="ckbxNstOption3">Option 3</label>
</div>
<ul class="list-unstyled pl-4">
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption3a">
<label class="custom-control-label" for="ckbxNstOption3a">Option 3A</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption3b">
<label class="custom-control-label" for="ckbxNstOption3b">Option 3B</label>
</div>
</li>
</ul>
</li>
</ul>
<ul id="filter-1" class="list-unstyled mb-0 form-check collapse">
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption4">
<label class="custom-control-label" for="ckbxNstOption4">Option 4</label>
</div>
<ul class="list-unstyled pl-4">
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption4a">
<label class="custom-control-label" for="ckbxNstOption4a">Option 4A</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption4b">
<label class="custom-control-label" for="ckbxNstOption4b">Option 4B</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption4c">
<label class="custom-control-label" for="ckbxNstOption4c">Option 4C</label>
</div>
</li>
<li>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ckbxNstOption4d">
<label class="custom-control-label" for="ckbxNstOption4d">Option 4D</label>
</div>
</li>
</ul>
</li>
</ul>
<a href="#filter-1" class="lmp-filter-toggle" data-toggle="collapse" aria-expanded="false" aria-controls="filter-1">
<span class="more">Show More</span>
<span class="less">Show Less</span>
</a>
</div>
</div>
</div>
<div class="lmp-filter-item radioFilterExample">
<h5 id="radioFilterExampleHeading" class="mb-0 h6">
<button class="accordion-trigger collapsed" type="button" data-toggle="collapse" data-target="#radioFilterExample" aria-expanded="false" aria-controls="radioFilterExample">
Radio Filters
</button>
</h5>
<div id="radioFilterExample" class="accordion-collapse collapse" aria-labelledby="radioFilterExampleHeading">
<div class="accordion-content">
<div class="form-check">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="radioFilterExample-0" name="RadioFilterGroup" checked>
<label class="custom-control-label" for="radioFilterExample-0">Option1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="radioFilterExample-1" name="RadioFilterGroup">
<label class="custom-control-label" for="radioFilterExample-1">Option2</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="radioFilterExample-2" name="RadioFilterGroup">
<label class="custom-control-label" for="radioFilterExample-2">Option3</label>
</div>
<div id="filter-2" class="collapse">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="radioFilterExample-m0" name="RadioFilterGroup">
<label class="custom-control-label" for="radioFilterExample-m0">Option4</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="radioFilterExample-m1" name="RadioFilterGroup">
<label class="custom-control-label" for="radioFilterExample-m1">Option5</label>
</div>
</div>
<a href="#filter-2" class="lmp-filter-toggle" data-toggle="collapse" aria-expanded="false" aria-controls="filter-2">
<span class="more">Show More</span>
<span class="less">Show Less</span>
</a>
</div>
</div>
</div>
</div>
<div class="lmp-filter-item textFilterExample">
<h5 id="textFilterExampleHeading" class="mb-0 h6">
<button class="accordion-trigger collapsed" type="button" data-toggle="collapse" data-target="#textFilterExample" aria-expanded="false" aria-controls="textFilterExample">
Text Input Filters
</button>
</h5>
<div id="textFilterExample" class="accordion-collapse collapse" aria-labelledby="textFilterExampleHeading">
<div class="accordion-content">
<div class="animated-input">
<div class="form-group">
<input type="" class="form-control" id="textFilterExample1">
<label for="textFilterExample1">Input Label</label>
</div>
</div>
<div class="animated-input">
<div class="form-group">
<input type="" class="form-control" id="textFilterExample2" aria-describedby="inputHelp-textFilterExample2">
<label for="textFilterExample2">Input Label</label>
<span id="inputHelp-textFilterExample2" class="form-text">Input field help text</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>