Today we will learn how to implement a filterable content grid using Isotope.js: step by step guide
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Filter With All Button</title>
</head>
<style>
.isotope-toolbar{
text-align: center;
padding: 25px 0;
}
button {
display: inline-block;
padding: 10px 20px;
margin: 0px 5px;
background-color: #fff;
color: #000;
font-size: 18px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: all 0.5s;
border: none;
outline: none;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
font-family: cursive;
}
button:hover {
outline: none;
background-color: #000;
color: #fff;
}
button.active {
outline: none;
background-color: #000;
color: #fff;
}
.isotope-box{
display: flex;
width: 100%;
}
.isotope-item{
width: 20%;
height: 100px;
background-color: green;
margin: 25px;
position: absolute;
left: 0px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: cursive;
transition: all 0.5s;
border-radius: 5px;
}
.red{
background-color: red;
color: #fff;
}
.green{
background-color: green;
color: #fff;
}
.yellow{
background-color: yellow;
color: #000;
}
.gray{
background-color: gray;
color: #000;
}
.blue{
background-color: blue;
color: #fff;
}
</style>
<body>
<div class="isotope-wrapper">
<div class="isotope-toolbar">
<button class="isotope-toolbar-btn active" data-type="*" name="isotope-filter">
<span>All</span>
</button>
<button class="isotope-toolbar-btn" data-type="green" name="isotope-filter">
<span>Green</span>
</button>
<button class="isotope-toolbar-btn" data-type="gray" name="isotope-filter">
<span>Gray</span>
</button>
<button class="isotope-toolbar-btn" data-type="yellow" name="isotope-filter">
<span>Yellow</span>
</button>
<button class="isotope-toolbar-btn" data-type="red" name="isotope-filter">
<span>Red</span>
</button>
<button class="isotope-toolbar-btn" data-type="blue" name="isotope-filter">
<span>Blue</span>
</button>
</div>
<div class="isotope-box">
<div class="isotope-item red" data-type="red">
<h1>Red</h1>
</div>
<div class="isotope-item yellow" data-type="yellow">
<h1>Yellow</h1>
</div>
<div class="isotope-item red" data-type="red">
<h1>Red</h1>
</div>
<div class="isotope-item yellow" data-type="yellow">
<h1>Yellow</h1>
</div>
<div class="isotope-item blue" data-type="blue">
<h1>Blue</h1>
</div>
<div class="isotope-item gray" data-type="gray">
<h1>Grey</h1>
</div>
<div class="isotope-item green" data-type="green">
<h1>Green</h1>
</div>
<div class="isotope-item yellow" data-type="yellow">
<h1>Yellow</h1>
</div>
<div class="isotope-item blue" data-type="blue">
<h1>Blue</h1>
</div>
<div class="isotope-item green" data-type="green">
<h1>Green</h1>
</div>
<div class="isotope-item red" data-type="red">
<h1>Red</h1>
</div>
<div class="isotope-item blue" data-type="blue">
<h1>Blue</h1>
</div>
<div class="isotope-item green" data-type="green">
<h1>Green</h1>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script id="rendered-js" >
// external js: isotope.pkgd.js
// init Isotope elements
var $box = $(".isotope-box").isotope({
itemSelector: ".isotope-item" });
// filter functions
// bind filter button click
$(".isotope-toolbar").on("click", "button", function () {
var filterValue = $(this).attr("data-type");
$(".isotope-toolbar-btn").removeClass("active");
$(this).addClass("active");
if (filterValue !== "*") {
filterValue = '[data-type="' + filterValue + '"]';
}
console.log(filterValue);
$box.isotope({ filter: filterValue });
});
// change is-checked class on buttons
</script>
</body>
</html>Definitely! The code is an HTML document demonstrating the filter implementation using the Isotope.js library. Filters allow you to display and hide elements based on their specified categories.
Let’s break down the code and understand how it works:
Table of Contents
HTML Structure:
- The
'<head>‘ section contains meta information and the title of the page. - The ‘
<style>‘ section contains CSS styles that define the appearance of the filter buttons and the isotope items. - The ‘
<body>‘ section contains the main content of the page.
Filter Toolbar:
- The filter toolbar is created using a ‘
<div>‘ element with the class ‘isotope-toolbar‘. - Inside the toolbar, there are several ‘
<button>‘ elements that represent different filter options. Each button has a ‘data-type‘ attribute that corresponds to a specific category. - The first button has the class ‘
active‘ by default, indicating that it is selected initially.
Isotope Items:
- The isotope items are contained within a ‘
<div>‘ element with the class ‘isotope-box‘. - Each item is represented by a ‘
<div>‘ element with the class ‘isotope-item‘. These items have a ‘data-type‘ attribute that specifies their category. - The items also have a background color and text content to differentiate them visually.
JavaScript:
- The JavaScript code is included at the end of the HTML document within the ‘
<script>‘ tags. - It utilizes the Isotope.js library to handle the filtering functionality.
- The ‘
var $box‘ variable selects the container element with the class ‘isotope-box‘ and initializes the Isotope plugin. - When a filter button is clicked, an event handler is triggered.
- The filter value is obtained from the ‘
data-type‘ attribute of the clicked button. - The active class is updated to reflect the selected filter button.
- The filter value creates a selector for the Isotope plugin, which filters and displays the corresponding items.
To use this code for your blog or website, you can copy the entire HTML code and modify the content and styling according to your needs. Additionally, you may need to include the necessary CSS and JavaScript files, such as Isotope.js and jQuery, by adding the corresponding ‘<link>‘ and ‘<script>‘ tags in the HTML document.
Adjust the file paths of external resources accordingly, and ensure you have internet connectivity to fetch the required files from the provided URLs.
Note: If you require further customization or integration with your existing website, additional code modifications might be necessary.
