Simple Content Filter

By Rafi

F6
#
filter button button group grid block grid interaction js flexbox
How do I use This?

A simple content filter allowing you to show or hide items based on the class you assign to them.

HTML
<section class="filter-simple">
  <div class="button-group round">
    <button class="button hollow filter-simple-button is-active" data-filter="all">All</button>
    <button class="button hollow filter-simple-button" data-filter="space">Space</button>
    <button class="button hollow filter-simple-button" data-filter="animals">Animals</button>
    <button class="button hollow filter-simple-button" data-filter="nature">Nature</button>
  </div>

  <div class="row small-up-2 medium-up-3 large-up-4">
    <div class="column column-block filter-simple-item space">
      <img src="https://spaceholder.cc/350x350" alt="" />
    </div>
    <div class="column column-block filter-simple-item nature">
      <img src="https://placeimg.com/350/350/nature" alt="" />
    </div>
    <div class="column column-block filter-simple-item animals">
      <img src="https://placeimg.com/350/350/animals" alt="" />
    </div>
    <div class="column column-block filter-simple-item animals">
      <img src="https://placeimg.com/350/350/animals" alt="" />
    </div>
    <div class="column column-block filter-simple-item animals">
      <img src="https://placeimg.com/350/350/animals" alt="" />
    </div>
    <div class="column column-block filter-simple-item nature">
      <img src="https://placeimg.com/350/350/nature" alt="" />
    </div>
    <div class="column column-block filter-simple-item nature">
      <img src="https://placeimg.com/350/350/nature" alt="" />
    </div>
    <div class="column column-block filter-simple-item animals">
      <img src="https://placeimg.com/350/350/animals" alt="" />
    </div>
    <div class="column column-block filter-simple-item nature">
      <img src="https://placeimg.com/350/350/nature" alt="" />
    </div>
    <div class="column column-block filter-simple-item animals">
      <img src="https://placeimg.com/350/350/animals" alt="" />
    </div>
    <div class="column column-block filter-simple-item space">
      <img src="https://spaceholder.cc/350x350" alt="" />
    </div>
    <div class="column column-block filter-simple-item space">
      <img src="https://spaceholder.cc/350x350" alt="" />
    </div>
  </div>
</section>


.filter-simple {
  .button-group {
     justify-content: center; // center the button group
  }

  .filter-simple-button.hollow {
    &.is-active,
    &:focus,
    &:active {
      background-color: $primary-color;
      color: $white;
    }
  }
}

// optional styles to round the button group edges
.button-group.round {
  :first-child {
    border-radius: 5000px 0 0 5000px;
  }

  :last-child {
    border-radius: 0 5000px 5000px 0;
  }
}

// class that spaces blocks vertically - will be built into Foundation 6.4
.column-block {
  margin-bottom: 30px;
}



.filter-simple .button-group {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.filter-simple .filter-simple-button.hollow.is-active, .filter-simple .filter-simple-button.hollow:focus, .filter-simple .filter-simple-button.hollow:active {
  background-color: #1779ba;
  color: #fefefe;
}

.button-group.round :first-child {
  border-radius: 5000px 0 0 5000px;
}

.button-group.round :last-child {
  border-radius: 0 5000px 5000px 0;
}

.column-block {
  margin-bottom: 30px;
}
JS
// shows and hides filtered items
$(".filter-simple-button").click(function() {
  var value = $(this).attr('data-filter');
  if(value === "all") {
    $('.filter-simple-item').show('1000');
  } else {
    $(".filter-simple-item").not('.'+value).hide('3000');
    $('.filter-simple-item').filter('.'+value).show('3000');
  }
});

// changes active class on filter buttons
$('.filter-simple-button').click(function () {
  $(this).siblings().removeClass('is-active');
  $(this).addClass('is-active');
});

Similar Building Blocks

control

Mobile App Toggle

F6
by Rafi
control

Selectable Card

F6
by Christine Siu
control

Button Hover Options

F6
by Rafi