Learn How to Filter a DIV Element Based on Its Class Name with JavaScript

Here is the solution for filtering a DIV element based on its class name, with the HTML, CSS, and JavaScript code in separate files and optimized for SEO best practices.

HTML Code (`index.html`):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn how to create a filtering system for DIV elements based on their class name using JavaScript. Filter elements dynamically based on category.">
    <meta name="keywords" content="filter DIV elements, JavaScript filter, filter elements by class name, web development, dynamic filtering, interactive filter list, filter items JavaScript">
    <meta name="author" content="Your Name">
    <meta property="og:title" content="Learn How to Filter a DIV Element Based on Its Class Name">
    <meta property="og:description" content="Learn how to create a filtering system for DIV elements based on their class name using JavaScript. This tutorial covers how to filter and display specific elements dynamically.">
    <meta property="og:image" content="image.jpg">
    <meta property="og:url" content="yourwebsite.com">
    <meta name="twitter:title" content="Learn How to Filter a DIV Element Based on Its Class Name">
    <meta name="twitter:description" content="Create a dynamic filtering system for DIV elements using JavaScript, filter by class name to display selected items.">
    <meta name="twitter:image" content="image.jpg">
    <meta name="twitter:card" content="summary_large_image">
    <title>Learn How to Filter a DIV Element Based on Its Class Name</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h2>Filter DIV Elements</h2>

<div id="myBtnContainer">
  <button class="btn active" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('cars')"> Cars</button>
  <button class="btn" onclick="filterSelection('animals')"> Animals</button>
  <button class="btn" onclick="filterSelection('fruits')"> Fruits</button>
  <button class="btn" onclick="filterSelection('colors')"> Colors</button>
</div>

<div class="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv colors fruits">Orange</div>
  <div class="filterDiv cars">Volvo</div>
  <div class="filterDiv colors">Red</div>
  <div class="filterDiv cars">Ford</div>
  <div class="filterDiv colors">Blue</div>
  <div class="filterDiv animals">Cat</div>
  <div class="filterDiv animals">Dog</div>
  <div class="filterDiv fruits">Melon</div>
  <div class="filterDiv fruits animals">Kiwi</div>
  <div class="filterDiv fruits">Banana</div>
  <div class="filterDiv fruits">Lemon</div>
  <div class="filterDiv animals">Cow</div>
</div>

<script src="script.js"></script>

</body>
</html>

CSS Code (`style.css`):

/* General styles for the filter DIVs */
.filterDiv {
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none; /* Hidden by default */
}

.show {
  display: block; /* Display when filtered */
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

/* Style the filter buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

JavaScript Code (`script.js`):

// Initial call to show all items
filterSelection("all");

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = ""; // Show all if no filter is selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show"); // Hide all elements
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show"); // Show only elements that match the filter
  }
}

// Add 'show' class to elements
function w3AddClass(element, name) {
  var arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (var i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

// Remove 'show' class from elements
function w3RemoveClass(element, name) {
  var arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (var i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

// Highlight the active button
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active"; // Mark the clicked button as active
  });
}

Explanation:

HTML Structure:
- The #myBtnContainer holds the buttons that allow the user to filter the DIV elements by their class name. The filterSelection() function is called when a button is clicked.
- The .container holds the DIV elements that are filtered. Each DIV has multiple classes representing its category, such as cars, animals, fruits, and colors.
CSS Styling:
- The filterDiv class hides the DIV elements by default (display: none).
- The show class is used to display the DIV elements that match the selected category.
- The .btn class styles the buttons, and the .active class highlights the currently active button.
JavaScript Functionality:
- The filterSelection() function loops through all the DIV elements and shows only those that contain the class corresponding to the selected category.
- The w3AddClass() and w3RemoveClass() functions are used to dynamically add or remove classes from elements.
- The buttons change their active state when clicked, which is handled by adding and removing the active class.

Learn How to Filter a DIV Element Based on Its Class Name with JavaScript

HTML Code (index.html):

CSS Code (style.css):

JavaScript Code (script.js):

Explanation:

Leave a Reply Cancel reply

HTML Code (`index.html`):

CSS Code (`style.css`):

JavaScript Code (`script.js`):