Jump to content

filter element


Recommended Posts


I'm trying to filter my projects by typologies which are a page reference field in my project page.

I'm using w3.css and I started from this example https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements

in my grid template I have this

<div id="myBtnContainer" class="w3-padding-16">
			<button class="btn active" onclick="filterSelection('all')"> All</button>
				$typos = $pages->find("template=types");
				foreach ($typos as $typo){
					echo "<button class='btn' onclick={filterSelection('$typo->name')}>$typo->title</button>";


		<div class="w3-row">

			<?php $items = $pages->find("template=project");
				foreach ($items as $item){
					$typotag = $item->Types->name;
					$thumb = $item->images->first()->size(400,300);
						echo "<div class='column $typotag'>
									<div class='w3-card-4 jegreen'>
										<a href='$item->url'>
											<img src='$thumb->url'  alt='Too Bad' style='width:100%'>
											<div class='w3-container'>
			} ?>


my script looks like this

filterSelection("all")// Execute the function and show all columns

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("column");
  if (c == "all") c = "";
  // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "w3-show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "w3-show");

// Show filtered elements
function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];

// Hide elements that are not selected
function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
  element.className = arr1.join(" ");

// Add active class to the current button (highlight it)
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";

and I add this to my css

.show {
  display: block;
.filterDiv {
  float: left;
  background-color: #c8d7d4;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
.container {
  margin-top: 20px;
  overflow: hidden;

with the inspector of google chrome I can see that the script is adding or removing the active class of myBtnContainer, and adding or removing the show class to the column element (card of my project).

but it doesn't hide the unselectioned card, it's still displaying all my project.

What am I doing wrong?

thanks for your help.

Link to comment
Share on other sites

In your JS you're adding/removing the class w3-show but in your CSS your class is .show. Does your .column has


This is used to hide all elements and only show the elements containing .show. Also make sure your .show class is beneath your .column class to override the display setting

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...