Filtering HTML content?

Question

I am currently working on a webpage and I'd like for the images to be filtered based on the button presses. So if I press Holidays, it should only show images with the css class "holiday" assigned to them, etc.

I've already tried the following 2 approaches, but didn't get them to work. Probably a mistake from my side due to lacking a good understanding of javascript.

How to Filter Div Elements by W3Schools
Filtering from Drop Down Menu from a Stack Overflow post.

* {
    box-sizing: border-box;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red; /* Just for Display purposes */
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

.button-container {
  text-align: center;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.flex-content {
    width: 20%;
    padding: 5px;
}

<body>
  <div class="row">
    <div class="col-12">
      <h1 style="text-align: center;">Image List</h1>
      <div class="button-container">
        <button class="button" >All</button>
        <button class="button" >Holidays</button>
        <button class="button" >Work</button>
      </div>
    </div>
    </div>
      <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
          <div class="flex-container">
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content holiday">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content work">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
          </div>
        </div>
      <div class="col-2"> 
    </div>
  </div>
</body>

Also on jsfiddle

I left it out so as to not clutter the file. The JavaScript I used can be found in the other 2 links. — Ministrelle
– Ministrelle, Commented Mar 20, 2020 at 8:40
just to help you out in the best way. Why is every image wrapped with a div with flex-content class? Some additional information gone be shown inside as well? — Dejan.S
– Dejan.S, Commented Mar 20, 2020 at 8:42
Yes, I plan to add additional info later on. An overlay with a title and some other statistics for every image. — Ministrelle
– Ministrelle, Commented Mar 20, 2020 at 8:45

Shiladitya · Accepted Answer · 2020-03-20 08:49:58Z

Here you go with a solution

filterSelection("all")
function filterSelection(c) {
	var eles = document.getElementsByClassName("flex-content");
  
  for(var i=0; i < eles.length; i++) {
  	if (c === "all" || eles[i].classList.contains(c)) {
    	eles[i].classList.remove("displayNone");
    } else {
    	eles[i].classList.add("displayNone");
    }
  }
}

* {
    box-sizing: border-box;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red; /* Just for Display purposes */
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

.button-container {
  text-align: center;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.flex-content {
    width: 20%;
    padding: 5px;
}

.displayNone {
  display: none;
}

<body>
  <div class="row">
    <div class="col-12">
      <h1 style="text-align: center;">Image List</h1>
      <div class="button-container">
        <button class="btn" onclick="filterSelection('all')" >All</button>
        <button class="btn" onclick="filterSelection('holiday')" >Holidays</button>
        <button class="btn" onclick="filterSelection('work')" >Work</button>
      </div>
    </div>
    </div>
      <div class="row">
        <div class="col-2"></div>
        <div class="col-8">
          <div class="flex-container">
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content holiday">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content work">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
            <div class="flex-content">
              <img src="https://via.placeholder.com/300" style="width: 100%;"/>
            </div>
          </div>
        </div>
      <div class="col-2"> 
    </div>
  </div>
</body>

Add a onClick method filterSelection to buttons and pass values as argument.

Created a class displayNone for hiding the element.

Solution using jsfiddle

Collectives™ on Stack Overflow

Filtering HTML content?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related