Blog
Here is a simple filter system using jQuery to hide and show the list on the left side as a user clicks on the filter. You can modify and enhance it according to your needs…
Demo
Open demo in a full window – https://demos.webdevpuneet.com/jquery/filter-content/index.html
HTML
<!-- Created by webdevpuneet.com -->
<!doctype html>
<html lang="en">
<head>
<script data-ad-client="ca-pub-2762737943861458" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<title>Simple Filter Using jQuery</title>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="robots" content="INDEX,FOLLOW"/>
<meta name="keywords" content="" />
<meta name="description" content="Simple Filter Using jQuery"/>
<meta name="author" content="webdevpuneet.com" />
<meta name="copyright" content="webdevpuneet.com" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/css/common.css?v=6">
<style>
body{padding:10px;}
</style>
</head>
<body>
<div class="">
<h1>Simple Filter Using jQuery</h1>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- wdp-demo -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2762737943861458"
data-ad-slot="4811241650"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="schedulenew__flex">
<div class="schedulenew__flex-left">
<div class="schedulenew__list-item filter-event">
<h2>8:00 AM | Event</h2>
<div class="schedulenew__list-flex">
<div class="schedulenew__list-left">
8:00–9:00
</div>
<div class="schedulenew__list-right">
<h3>Early morning coffee</h3>
<p>Hall A Foyer</p>
</div>
</div>
</div>
<div class="schedulenew__list-item filter-training">
<h2>8:00 AM | Training</h2>
<div class="schedulenew__list-flex">
<div class="schedulenew__list-left">
8:00–9:00
</div>
<div class="schedulenew__list-right">
<h3>Early morning coffee</h3>
<p>Hall A Foyer</p>
</div>
</div>
</div>
<div class="schedulenew__list-item filter-event">
<h2>8:00 AM | Event</h2>
<div class="schedulenew__list-flex">
<div class="schedulenew__list-left">
8:00–9:00
</div>
<div class="schedulenew__list-right">
<h3>Early morning coffee</h3>
<p>Hall A Foyer</p>
</div>
</div>
</div>
<div class="schedulenew__list-item filter-training">
<h2>8:00 AM | Training</h2>
<div class="schedulenew__list-flex">
<div class="schedulenew__list-left">
8:00–9:00
</div>
<div class="schedulenew__list-right">
<h3>Early morning coffee</h3>
<p>Hall A Foyer</p>
</div>
</div>
</div>
</div>
<div class="schedulenew__flex-right">
<div class="schedulenew__filters">
<div class="schedulenew__filters-head clearfix">
<h2 class="schedulenew__filter-title pull-left">Filters</h2>
<a id="clearfilter" class="schedulenew__filter-clear pull-right" href="javascript:;">CLEAR FILTERS</a>
</div>
<div class="schedulenew__filters-body clearfix">
<label><input class="filter-checkbox" name="filter" value="filter-event" type="checkbox"></input> Event</label>
<label><input class="filter-checkbox" name="filter" value="filter-training" type="checkbox"></input> Training Course</label>
</div>
</div>
<div class="element"></div>
</div>
</div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- wdp-demo -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2762737943861458"
data-ad-slot="4811241650"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="./assets/js/common.js?v=1"></script>
</div>
</body>
</html>
CSS
/* Schedule New */
.schedulenew__flex{
display: flex;
width: 100%;
min-height: 100vh;
margin-top: 20px;
}
.schedulenew__flex-left{
width: 70%;
font-size: 16px;
padding-right: 15px;
}
.schedulenew__flex-right{
width: 30%;
padding-left: 15px;
}
.schedulenew__list-flex{
display: flex;
width: 100%;
background: #f1f1f1;
}
.schedulenew__list-left{
width: 33%;
padding:15px;
}
.schedulenew__list-right{
width: 66%;
padding:10px 15px;
}
.schedulenew__list-right h2{
}
.schedulenew__list-item{
font-family: 'Neo_Sans',sans-serif !important;
margin-bottom: 20px;
}
.schedulenew__list-item h2{
color: #e00 !important;
font-size: 20px;
font-family: 'Neo_Sans',sans-serif !important;
margin-bottom: 10px;
}
.schedulenew__list-item h3{
font-family: 'Neo_Sans',sans-serif !important;
font-weight: 600;
}
@media ( max-width:768px ){
.schedulenew__list-item h2{
color: #e00 !important;
font-size: 16px;
}
.schedulenew__list-flex{
display: block;
width: 100%;
}
.schedulenew__list-left{
width: 100%;
padding-right: 0;
}
.schedulenew__list-right{
width: 100%;
}
.schedulenew__flex-left{
width: 100%;
font-size: 14px;
}
}
/* schedulenew__filters */
.schedulenew__filters{
}
.schedulenew__filters-head{
margin-bottom: 10px;
}
.schedulenew__filters-body{
border:1px solid #cecece;
padding:15px;
font-size: 16px;
}
.schedulenew__filter-title{
font-family: 'Neo_Sans',sans-serif !important;
font-size: normal;
font-weight: 600;
}
.schedulenew__filters-inner{
border:1px solid;
}
.schedulenew__filter-clear{
}
jQuery
/* Schedule filter */
/* Filter Engine */
function myFunction(item, index) {
$('.' + item).show();
}
function filterengine(){
// Put all checked filter value in an array
var favorite = [];
$.each($("input.filter-checkbox:checked"), function(){
favorite.push($(this).val());
});
// Filter List
if( favorite.length === 0 ){
$('.schedulenew__list-item').show();
}else{
$('.schedulenew__list-item').hide();
favorite.forEach(myFunction);
}
};
$('.schedulenew__filters-body label input').click(function(){
$this = $(this);
value = $this.val();
filterengine();
});
$('#clearfilter').click(function(){
$(this).closest('.schedulenew__filters').find('input.filter-checkbox').prop('checked', false);
filterengine();
});
You must be logged in to post a comment.