filter element

[jeremie]

Hi,

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>
			<?php
				$typos = $pages->find("template=types");
				foreach ($typos as $typo){
					echo "<button class='btn' onclick={filterSelection('$typo->name')}>$typo->title</button>";

				}
			?>
		</div>

		<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'>
												<h5>$item->title</h5>
											</div>
										</a>
									</div>
						</div>";
			} ?>



  		</div>

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.

[ttttim]

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

display:none 

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

[jeremie]

thanks ttttim, I had corrected the js error but I was missing the display tag in for .column.

I really appreciate It was giving me so much headache.