Site icon Puneet Sharma – Freelance Web Developer

Simple Filter Using jQuery

Puneet Sharma
Simple Filter Using jQuery
Simple Filter Using jQuery

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();
});
Exit mobile version