Home Web Development JavaScript jQuery Filter Example With Smooth Transition | jQuery Content Filter

jQuery Filter Example With Smooth Transition | jQuery Content Filter

February 16, 2020

2654

How we can create a content filter program using JS or jQuery? Solution: See this jQuery Filter Example With Smooth Transition, JQuery Content Filter Program.

Previously I have shared a CSS Content filter, but this filtering program is based on jQuery. Basically, content filter is a kind of category filtering it separate contents category wise. This type of filter program mostly uses on the list, tables, image portfolio, etc. If you see the content filter is everywhere, just methods are different some are URL based and some Dynamic program based.

Today you will learn to create the jQuery Content Filter program. Basically there are 8 horizontal bars with 3 colors red, green, and blue mix up with text. And at the top, there are 4 navigation buttons for filtering like button for red, blue, green, or all. By default it is selected all, means you will see all the bars. But when you will click on any button like red then only red bars will visible, the same condition applied to all colors.

So, Today I am sharing jQuery Filter Example With Smooth Transition. This is only an example of jQuery filtering, you can apply it on any program after getting the concept. There I have used HTML and CSS to create the layout and jQuery for functioning. You can use this program on your website to filter anything.

If you are thinking now how this filter program actually is, then see the preview given below.

Preview Of Content Filter

See this video preview to getting an idea of how this program looks like.

https://webdevtrick.com/wp-content/uploads/smooth-content-filter.mp4?_=1

Live Demo

jQuery Filter Example With Smooth Transition Source Code

Before sharing source code, let’s talk about the program. First I have created a section placed 4 buttons for navigations. After that, I have created 8 bars with a class name according to which color I want. Also inside the buttons, I have placed class name and in the button, I have placed a special class to active by default.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS I gave color values like background, text, and hover colors to the elements. Also, I have scaled the button which is active by using CSS transform command. There is very little custom CSS because the program has not many styles.

jQuery handling here the filter function in this program. There jQuery fetched elements using $('Class or ID') method. I have used jQuery’s .addClass and .removeClass command to declare the functions on click. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>jQuery Content Filter | Webdevtrick.com</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<h2>jQuery Content Filtering</h2>
<p>
		<button class="s-all is-active">All Items</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<button class="s-red">Filter Red Items</button>
		<button class="s-blue">Filter Blue Items</button>
		<button class="s-green">Filter Green Items</button>
</p>

<div class="red">First</div>
<div class="red">Second</div>
<div class="blue">Third</div>
<div class="green">Fourth</div>
<div class="red">Fifth</div>
<div class="blue">Sixth</div>
<div class="blue">Seventh</div>
<div class="green">Eighth</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery Content Filter | Webdevtrick.com</title>

</head>

<body>

<h2>jQuery Content Filtering</h2>

<p>

<button class="s-all is-active">All Items</button>     

<button class="s-red">Filter Red Items</button>

<button class="s-blue">Filter Blue Items</button>

<button class="s-green">Filter Green Items</button>

</p>

<div class="red">First</div>

<div class="red">Second</div>

<div class="blue">Third</div>

<div class="green">Fourth</div>

<div class="red">Fifth</div>

<div class="blue">Sixth</div>

<div class="blue">Seventh</div>

<div class="green">Eighth</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
body {
  padding: 10%;
  font-family: sans-serif;
}

button {
  padding: 1em;
  border: 0;
  margin: 0.25em;
  color: #fff;
  cursor: pointer;
  outline: none;
}
button.is-active {
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

.s-red {
  background: #ff4136;
}
.s-red:hover {
  background: #e90d00;
}

.s-green {
  background: #2ecc40;
}
.s-green:hover {
  background: #208e2c;
}

.s-blue {
  background: #1da1f2;
}
.s-blue:hover {
  background: #004b8d;
}

.s-all {
  background: #333;
}
.s-all:hover {
  background: #0d0d0d;
}

.red, .green, .blue {
  color: #fff;
  padding: 1em;
  margin-bottom: 0.25em;
}

.red {
  background: #ff4136;
}

.green {
  background: #2ecc40;
}

.blue {
  background: #1da1f2;
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

body {

padding: 10%;

font-family: sans-serif;

}

button {

padding: 1em;

border: 0;

margin: 0.25em;

color: #fff;

cursor: pointer;

outline: none;

}

button.is-active {

-moz-transform: scale(1.15);

-ms-transform: scale(1.15);

-webkit-transform: scale(1.15);

transform: scale(1.15);

}

.s-red {

background: #ff4136;

}

.s-red:hover {

background: #e90d00;

}

.s-green {

background: #2ecc40;

}

.s-green:hover {

background: #208e2c;

}

.s-blue {

background: #1da1f2;

}

.s-blue:hover {

background: #004b8d;

}

.s-all {

background: #333;

}

.s-all:hover {

background: #0d0d0d;

}

.red, .green, .blue {

color: #fff;

padding: 1em;

margin-bottom: 0.25em;

}

.red {

background: #ff4136;

}

.green {

background: #2ecc40;

}

.blue {

background: #1da1f2;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
var fActive;

function filterColor(color){
  if(fActive != color){
    $('div').filter('.'+color).slideDown();
    $('div').filter(':not(.'+color+')').slideUp();
    fActive = color;
		$('button').removeClass("is-active");
  }
}

$('.s-red').click(function(){ filterColor('red'); $(this).addClass("is-active"); });
$('.s-blue').click(function(){ filterColor('blue'); $(this).addClass("is-active"); });
$('.s-green').click(function(){ filterColor('green'); $(this).addClass("is-active"); });

$('.s-all').click(function(){
  $('div').slideDown();
  fActive = 'all';
	$(this).addClass("is-active");
});

// Code By Webdevtrick ( https://webdevtrick.com )

var fActive;

function filterColor(color){

if(fActive != color){

$('div').filter('.'+color).slideDown();

$('div').filter(':not(.'+color+')').slideUp();

fActive = color;

$('button').removeClass("is-active");

}

$('.s-red').click(function(){ filterColor('red'); $(this).addClass("is-active"); });

$('.s-blue').click(function(){ filterColor('blue'); $(this).addClass("is-active"); });

$('.s-green').click(function(){ filterColor('green'); $(this).addClass("is-active"); });

$('.s-all').click(function(){

$('div').slideDown();

fActive = 'all';

$(this).addClass("is-active");

});

That’s It. Now you have successfully created jQuery Filter Example With Smooth Transition, jQuery Content Filter Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.