How can I make a filter like this?

Question

I found a demo with a filter and sort function that has almost all I need. The problem isn’t that I want to sort them under each other.

You guys can see it here what I mean: http://1337zone.WIN

These boxes under the filter buttons need to be under each other, not next to each other. They did it in JavaScript I think. When I delete JS files it doesn’t work at all.

The best option is to do it myself. I was searching it for a long time and I just gave up — I don’t understand JavaScript.

It basically look like this:

<div class="grid">
  <div class="element-item metal transition green" data-category="transition">
    <h5 class="name">Hallo</h5>
    <p class="symbol">7</p>
    <p class="number">153</p>
    <p class="weight">53</p>
  </div>
  <div class="element-item metalloid blue" data-category="metalloid">
    <h5 class="name">Hello</h5>
    <p class="symbol">1</p>
    <p class="number">521</p>
    <p class="weight">12</p>
  </div>
  <div class="element-item metal post-transition cyan" data-category="post-transition">
    <h5 class="name">Hi</h5>
    <p class="symbol">3</p>
    <p class="number">83</p>
    <p class="weight">20</p>
  </div>
  <div class="element-item metal post-transition cyan" data-category="post-transition">
    <h5 class="name">Was?</h5>
    <p class="symbol">3</p>
    <p class="number">82</p>
    <p class="weight">20</p>
  </div>
</div>

In the class you can see "cyan", "blue", "green" and this code:

<button class="button" data-filter=".green">green</button>

does some magic and makes it work. Don’t ask me how because I have no idea how.

Is it possible to do it in HTML and CSS only?

Answer 1

This can be done without using a plugin in the following way. The value of data filter is get using data() function in jQuery and use that to show items with that class name.

$(document).ready(function() {
  $('.button').on('click', function() {
    var classSelector = $(this).data('filter');
    $('.grid .element-item').hide();
    $('.grid').find(classSelector).show();
  });
});

.green{
  background-color:green;
}
.cyan{
  background-color:cyan;
}
.blue{
  background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="grid">
  <div class="element-item metal transition green" data-category="transition">
    <h5 class="name">Hallo</h5>
    <p class="symbol">7</p>
    <p class="number">153</p>
    <p class="weight">53</p>
  </div>
  <div class="element-item metalloid blue" data-category="metalloid">
    <h5 class="name">Hello</h5>
    <p class="symbol">1</p>
    <p class="number">521</p>
    <p class="weight">12</p>
  </div>
  <div class="element-item metal post-transition cyan" data-category="post-transition">
    <h5 class="name">Hi</h5>
    <p class="symbol">3</p>
    <p class="number">83</p>
    <p class="weight">20</p>
  </div>
  <div class="element-item metal post-transition cyan" data-category="post-transition">
    <h5 class="name">Was?</h5>
    <p class="symbol">3</p>
    <p class="number">82</p>
    <p class="weight">20</p>
  </div>
</div>

<button class="button" data-filter=".green">green</button>
<button class="button" data-filter=".cyan">cyan</button>
<button class="button" data-filter=".blue">blue</button>