Form - Filters
Component #1
195 courses to get started
<!-- Select -->
<select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm mb-1",
"dropdownAutoWidth": true,
"width": "auto"
}'>
<option value="sort1">Highest rated</option>
<option value="sort2">Newest</option>
<option value="sort3">Lowest price</option>
<option value="sort4">Highest price</option>
</select>
<!-- End Select -->
<!-- Select -->
<select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm mb-1",
"placeholder": "Type",
"dropdownAutoWidth": true,
"width": "auto"
}'>
<option label="empty"></option>
<option value="price1" selected>Paid</option>
<option value="price2">Free</option>
</select>
<!-- End Select -->
<!-- Select -->
<select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm mb-1",
"placeholder": "Duration",
"dropdownAutoWidth": true,
"width": "auto"
}'>
<option label="empty"></option>
<option value="duration1">0-3 Hours</option>
<option value="duration2">3-9 Hours</option>
<option value="duration3">9-24 Hours</option>
<option value="duration4" selected>24+ Hours</option>
</select>
<!-- End Select -->
<!-- Select -->
<select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm mb-1",
"placeholder": "Skills",
"dropdownAutoWidth": true,
"width": "auto"
}'>
<option label="empty"></option>
<option value="beginner" selected>Beginner</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
<!-- End Select -->
<link rel="stylesheet" href="./assets/vendor/select2/dist/css/select2.min.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/select2/dist/js/select2.full.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF SELECT2
// =======================================================
$('.js-custom-select').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
});
</script>
Component #2
110 products
<div class="container">
<!-- Sorting -->
<div class="row align-items-center">
<div class="col-sm mb-3 mb-sm-0">
<span class="font-size-1 ml-1">110 products</span>
</div>
<div class="col-sm-auto">
<div class="d-flex justify-content-sm-end align-items-center">
<!-- Select -->
<div class="mr-2">
<select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true,
"width": "auto"
}'>
<option value="mostRecent" selected>Sort by</option>
<option value="newest">Newest first</option>
<option value="priceHighLow">Price (high - low)</option>
<option value="priceLowHigh">Price (low - high)</option>
<option value="topSellers">Top sellers</option>
</select>
</div>
<!-- End Select -->
<!-- Select -->
<div class="mr-2">
<select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"dropdownAutoWidth": true,
"width": "auto"
}'>
<option value="alphabeticalOrderSelect1" selected>A-to-Z</option>
<option value="alphabeticalOrderSelect2">Z-to-A</option>
</select>
</div>
<!-- End Select -->
<!-- Nav -->
<ul class="nav nav-segment">
<li class="list-inline-item">
<a class="nav-link active" href="shop-products-grid.html">
<i class="fas fa-th-large"></i>
</a>
</li>
<li class="list-inline-item">
<a class="nav-link" href="shop-products-list.html">
<i class="fas fa-list"></i>
</a>
</li>
</ul>
<!-- End Nav -->
</div>
</div>
</div>
<!-- End Sorting -->
</div>
<link rel="stylesheet" href="./assets/vendor/select2/dist/css/select2.min.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/select2/dist/js/select2.full.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INITIALIZATION OF SELECT2
// =======================================================
$('.js-custom-select').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
});
</script>
Component #3
<!-- Filters Section -->
<div class="container space-1">
<div class="row mx-n1">
<div class="col-lg px-1 mb-2 mb-lg-0">
<!-- Input Group -->
<label class="sr-only" for="searchPropertySr">Search property</label>
<div class="input-group input-group-sm input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text" id="searchProperty">
<i class="fas fa-search"></i>
</span>
</div>
<input type="text" class="form-control" name="text" id="searchPropertySr" placeholder="Search property" aria-label="Search property" aria-describedby="searchProperty" value="London, England">
</div>
<!-- End Input Group -->
</div>
<div class="col-auto px-1 mb-2 mb-lg-0">
<!-- Unfold -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker-price btn btn-block btn-sm btn-white dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"smartPositionOff": true,
"target": "#priceFilterDropdown",
"type": "css-animation",
"animationIn": "slideInUp"
}'>Price
</a>
<div id="priceFilterDropdown" class="hs-unfold-content dropdown-menu dropdown-card" style="min-width: 21rem; max-width: 21rem;">
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- Bar Chart -->
<div class="position-relative overflow-hidden" style="height: 6rem; width: 18rem;">
<div class="position-absolute w-100 overflow-hidden">
<div style="height: 6rem; width: 18rem;">
<canvas class="js-chart"
data-hs-chartjs-options='{
"type": "bar",
"data": {
"labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
"datasets": [{
"data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
"backgroundColor": "#e7eaf3",
"borderColor": "#e7eaf3"
}]
},
"options": {
"responsive": true,
"scales": {
"yAxes": [{
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
},
"ticks": {
"beginAtZero": true
}
}],
"xAxes": [{
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
}
}]
},
"tooltips": {
"custom": false
}
}
}'></canvas>
</div>
</div>
<div id="foregroundBarChartDoubleResult" class="position-absolute overflow-hidden">
<div style="height: 6rem; width: 18rem;">
<canvas class="js-chart"
data-hs-chartjs-options='{
"type": "bar",
"data": {
"labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
"datasets": [{
"data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
"backgroundColor": "#377dff",
"borderColor": "#377dff"
}]
},
"options": {
"scales": {
"yAxes": [{
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
},
"ticks": {
"beginAtZero": true
}
}],
"xAxes": [{
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
}
}]
},
"tooltips": {
"custom": false
}
}
}'></canvas>
</div>
</div>
</div>
<!-- End Bar Chart -->
<!-- Range Slider -->
<input class="js-ion-range-slider" type="text" style="opacity: 0;"
data-hs-ion-range-slider-options='{
"type": "double",
"extra_classes": "range-slider-custom",
"min": 0,
"max": 1000,
"from": 250,
"to": 750,
"result_min_target_el": "#rangeSliderExampleDouble4MinResult",
"result_max_target_el": "#rangeSliderExampleDouble4MaxResult",
"foreground_target_el": "#foregroundBarChartDoubleResult"
}'>
<div class="row justify-content-center mt-5">
<div class="col">
<span class="d-block font-size-1 mb-1">Min price:</span>
<input type="text" class="form-control form-control-sm" id="rangeSliderExampleDouble4MinResult">
</div>
<div class="col">
<span class="d-block font-size-1 mb-1">Max price:</span>
<input type="text" class="form-control form-control-sm" id="rangeSliderExampleDouble4MaxResult">
</div>
</div>
<!-- End Range Slider -->
</div>
<div class="card-footer">
<div class="d-flex justify-content-between">
<a class="btn btn-sm btn-white" href="#">Clear</a>
<a class="btn btn-sm btn-primary" href="#">Save</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Unfold -->
</div>
<div class="col-auto px-1 mb-2 mb-lg-0">
<!-- Unfold -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-block btn-sm btn-white dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"target": "#bedsFilterDropdown",
"type": "css-animation",
"animationIn": "slideInUp"
}'>All beds
</a>
<div id="bedsFilterDropdown" class="hs-unfold-content dropdown-menu dropdown-menu-sm-right dropdown-card" style="max-width: 25rem;">
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- Button Group -->
<div class="btn-group btn-group-toggle btn-group-segment d-flex" data-toggle="buttons">
<label class="btn btn-sm flex-fill active">
<input type="radio" name="options" id="optionStudio" checked> Studio+
</label>
<label class="btn btn-sm flex-fill">
<input type="radio" name="options" id="option1"> 1+
</label>
<label class="btn btn-sm flex-fill">
<input type="radio" name="options" id="option2"> 2+
</label>
<label class="btn btn-sm flex-fill">
<input type="radio" name="options" id="option3"> 3+
</label>
<label class="btn btn-sm flex-fill">
<input type="radio" name="options" id="option4"> 4+
</label>
</div>
<!-- End Button Group -->
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Unfold -->
</div>
<div class="col-auto px-1 mb-2 mb-lg-0">
<!-- Unfold -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-block btn-sm btn-white dropdown-toggle" href="javascript:;"
data-hs-unfold-options='{
"target": "#propertyTypeFilterDropdown",
"type": "css-animation",
"animationIn": "slideInUp"
}'>Property type
</a>
<div id="propertyTypeFilterDropdown" class="hs-unfold-content dropdown-menu dropdown-menu-sm-right dropdown-card" style="min-width: 20rem;">
<!-- Card -->
<div class="card">
<div class="card-body">
<!-- Checkbox -->
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="propertyHousesChechbox">
<label class="custom-control-label" for="propertyHousesChechbox">
<span class="d-block text-dark">Houses</span>
<small class="d-block">Find a cozy place</small>
</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="propertyFlatsChechbox">
<label class="custom-control-label" for="propertyFlatsChechbox">
<span class="d-block text-dark">Flats</span>
<small class="d-block">Flats for sale or to rent</small>
</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="propertyMultiFamilyChechbox">
<label class="custom-control-label" for="propertyMultiFamilyChechbox">
<span class="d-block text-dark">Multi-family</span>
<small class="d-block">Multi-family houses or flats</small>
</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="propertyFarmsLandChechbox">
<label class="custom-control-label" for="propertyFarmsLandChechbox">
<span class="d-block text-dark">Farms/land</span>
<small class="d-block">Own a property for farming</small>
</label>
</div>
<!-- End Checkbox -->
</div>
<div class="card-footer">
<div class="d-flex justify-content-between">
<a class="btn btn-sm btn-white" href="#">Clear</a>
<a class="btn btn-sm btn-primary" href="#">Save</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
</div>
<!-- End Unfold -->
</div>
<div class="col-auto px-1 mb-2 mb-lg-0">
<a class="btn btn-sm btn-white" href="javascript:;" data-toggle="modal" data-target="#RealEstateMoreFiltersModal">
<i class="fas fa-sliders-h dropdown-item-icon"></i> More
</a>
</div>
</div>
</div>
<!-- End Filters Section -->
<!-- Real Estate More Filters Modal -->
<div class="modal fade" id="RealEstateMoreFiltersModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="RealEstateMoreFiltersModalTitle">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 id="RealEstateMoreFiltersModalTitle" class="modal-title">More filters</h4>
<div class="modal-close">
<button type="button" class="btn btn-icon btn-xs btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</button>
</div>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<label class="input-label">Status</label>
<!-- Button Group -->
<div id="statusLabel" class="btn-group btn-group-toggle btn-group-segment d-flex form-group" data-toggle="buttons">
<label class="btn btn-sm flex-fill active">
<input type="radio" name="options" id="optionBuy" checked>Buy
</label>
<label class="btn btn-sm flex-fill">
<input type="radio" name="options" id="optionRent">Rent
</label>
<label class="btn btn-sm flex-fill">
<input type="radio" name="options" id="optionSold">Sold
</label>
</div>
<!-- End Button Group -->
<!-- Form Group -->
<div class="form-group">
<!-- Select -->
<label for="featuresLabel" class="input-label">Features</label>
<select id="featuresLabel" class="js-custom-select" multiple
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm",
"placeholder": "Select features"
}'>
<option label="empty"></option>
<option value="Pets allowed">Pets allowed</option>
<option value="Parking lot">Parking lot</option>
<option value="Balcony">Balcony</option>
<option value="Garden">Garden</option>
<option value="Laundry">Laundry</option>
<option value="Heating">Heating</option>
<option value="AC">AC</option>
</select>
<!-- End Select -->
</div>
<!-- End Form Group -->
<div class="row mx-n2">
<div class="col-6 px-2">
<!-- Form Group -->
<div class="form-group">
<label for="bedsLabel" class="input-label">Beds</label>
<!-- Select -->
<select id="bedsLabel" class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm"
}'>
<option value="bedValueAny" selected>Any</option>
<option value="bedValueMin1">1</option>
<option value="bedValueMin2">2</option>
<option value="bedValueMin3">3</option>
<option value="bedValueMin4">4</option>
<option value="bedValueMin5">5</option>
</select>
<!-- End Select -->
</div>
<!-- End Form Group -->
</div>
<div class="col-6 px-2">
<!-- Form Group -->
<div class="form-group">
<!-- Select -->
<label for="bathLabel" class="input-label">Baths</label>
<select id="bathLabel" class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm"
}'>
<option value="bedValueAny" selected>Any</option>
<option value="bedValueMax1">1</option>
<option value="bedValueMax2">2</option>
<option value="bedValueMax3">3</option>
<option value="bedValueMax4">4</option>
<option value="bedValueMax5">5</option>
</select>
<!-- End Select -->
</div>
<!-- End Form Group -->
</div>
</div>
<!-- End Row -->
<label for="squareFeetLabel" class="input-label">Square feet</label>
<div class="row mx-n2">
<div class="col-6 px-2">
<!-- Form Group -->
<div class="form-group">
<input type="text" class="form-control form-control-sm" id="squareFeetLabel" placeholder="No min">
</div>
<!-- End Form Group -->
</div>
<div class="col-6 px-2">
<!-- Form Group -->
<div class="form-group">
<input type="text" class="form-control form-control-sm" placeholder="No max">
</div>
<!-- End Form Group -->
</div>
</div>
<!-- End Row -->
<!-- Form Group -->
<div class="form-group">
<!-- Select -->
<label for="lotSizeLabel" class="input-label">Lot size</label>
<select id="lotSizeLabel" class="js-custom-select"
data-hs-select2-options='{
"minimumResultsForSearch": "Infinity",
"customClass": "custom-select custom-select-sm"
}'>
<option value="No Min">No Min</option>
<option value="2000+ sqft">2000+ sqft</option>
<option value="3000+ sqft">3000+ sqft</option>
<option value="4000+ sqft">4000+ sqft</option>
<option value="5000+ sqft">5000+ sqft</option>
<option value="7500+ sqft">7500+ sqft</option>
<option value="0.25+ acre / 10890+ sqft">0.25+ acre / 10890+ sqft</option>
<option value="0.5+ acre / 21780+ sqft">0.5+ acre / 21780+ sqft</option>
<option value="1+ acre">1+ acre</option>
<option value="2+ acre">2+ acre</option>
<option value="5+ acre">5+ acre</option>
<option value="10+ acre">10+ acre</option>
</select>
<!-- End Select -->
</div>
<!-- End Form Group -->
<label for="yearBuiltLabel" class="input-label">Year built</label>
<div class="row mx-n2">
<div class="col-6 px-2">
<!-- Form Group -->
<div class="form-group">
<input type="text" class="form-control form-control-sm" id="yearBuiltLabel" placeholder="Min year">
</div>
<!-- End Form Group -->
</div>
<div class="col-6 px-2">
<!-- Form Group -->
<div class="form-group">
<input type="text" class="form-control form-control-sm" placeholder="Max year">
</div>
<!-- End Form Group -->
</div>
</div>
<!-- End Row -->
</div>
<!-- End Body -->
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-white mr-2" data-dismiss="modal">Clear all</button>
<button type="button" class="btn btn-sm btn-primary">Show 100+ Homes</button>
</div>
</div>
</div>
</div>
<!-- End Real Estate More Filters Modal -->
<link rel="stylesheet" href="./assets/vendor/ion-rangeslider/css/ion.rangeSlider.css">
<link rel="stylesheet" href="./assets/vendor/chart.js/dist/Chart.min.css">
<link rel="stylesheet" href="./assets/vendor/select2/dist/css/select2.min.css">
<!-- JS Implementing Plugins -->
<script src="./assets/vendor/select2/dist/js/select2.full.min.js"></script>
<script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
<script src="./assets/vendor/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<script src="./assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="./assets/vendor/chart.js.extensions/chartjs-extensions.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// INIT FLAGS
var rangeReady = false
// INITIALIZATION OF UNFOLD
// =======================================================
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
new HSUnfold('.js-hs-unfold-invoker-price', {
afterOpen() {
if (!rangeReady) {
// INITIALIZATION OF ION RANGE SLIDER
// =======================================================
$('.js-ion-range-slider').each(function () {
var ionRangeSlider = $.HSCore.components.HSIonRangeSlider.init($(this));
});
rangeReady = true
}
}
}).init();
// INITIALIZATION OF SELECT2
// =======================================================
$('.js-custom-select').each(function () {
var select2 = $.HSCore.components.HSSelect2.init($(this));
});
// INITIALIZATION OF CHARTJS
// =======================================================
$('.js-chart').each(function () {
var chart = $.HSCore.components.HSChartJS.init($(this));
});
});
</script>