<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="gallery col-lg-3 col-md-3 col-sm-12 col-xs-12"> <h1 class="gallery-title">Gallery</h1> <div align="left"> <div></div><button class="btn btn-default filter-button" data-filter="all">All</button></div> <div> <button class="btn btn-default filter-button" data-filter="hdpe">HDPE Pipes</button></div> <div> <button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button></div> <div> <button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button></div> <div> <button class="btn btn-default filter-button" data-filter="irrigation">Irrigation Pipes</button></div> <br/> </div> <div class="col-md-9"><div class="row"> <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-12 filter hdpe"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-12 filter sprinkle"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-12 filter hdpe"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-12 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-12 filter spray"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-3 col-md-3 col-sm-4 col-xs-6 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-12 filter spray"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-12 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-12 filter irrigation"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-3 col-md-4 col-sm-6 col-xs-12 filter hdpe"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-3 col-md-3 col-sm-4 col-xs-6 filter spray"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-3 col-md-3 col-sm-4 col-xs-6 filter sprinkle"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> </div></div></div> </div> </section>

.gallery-title { font-size: 36px; color: #42B32F; text-align: left; font-weight: 500; margin-bottom: 70px; } .gallery-title:after { content: ""; position: absolute; left: 10px; height: 45px; border-bottom: 1px solid #5e5e5e; } .filter-button { font-size: 14px; border: 0px solid #42B32F; border-radius: 0px; text-align: left; color: #333; margin-bottom: 30px; } .filter-button:hover { font-size: 14px; border: 0px solid #ffffff; border-radius: 0px; text-align: left; color: #aaa; background-color: #fff; } .btn-default:active .filter-button:active { background-color: #ffF; color: black .port-image { width: 100%;margin:10px 0; } .gallery_product { margin: 10px 0; padding: 20px 0px ; }

$(document).ready(function(){ $(".filter-button").click(function(){ var value = $(this).attr('data-filter'); if(value == "all") { //$('.filter').removeClass('hidden'); $('.filter').show('1000'); } else { // $('.filter[filter-item="'+value+'"]').removeClass('hidden'); // $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden'); $(".filter").not('.'+value).hide('3000'); $('.filter').filter('.'+value).show('3000'); } }); if ($(".filter-button").removeClass("active")) { $(this).removeClass("active"); } $(this).addClass("active"); });