<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-12 col-md-12 col-sm-12 col-xs-12"> <h1 class="gallery-title">Show Posts Year Wise</h1> </div> <div align="center"> <!-- <button class="btn btn-default filter-button" data-filter="all">All</button> --> <button class="btn btn-default filter-button active" data-filter="2020">2020</button> <button class="btn btn-default filter-button" data-filter="2019">2019</button> <button class="btn btn-default filter-button" data-filter="2018">2018</button> <button class="btn btn-default filter-button" data-filter="2017">2017</button> </div> <br /> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2020"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2019"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2020"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2018"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2017"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2018"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2017"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2018"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2018"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2020"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2017"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter 2019"> <img src="http://fakeimg.pl/365x365/" class="img-responsive"> </div> </div> </div>

.gallery-title { font-size: 36px; color: #42B32F; text-align: center; font-weight: 500; margin-bottom: 70px; } .gallery-title:after { content: ""; position: absolute; width: 7.5%; left: 46.5%; height: 45px; border-bottom: 1px solid #5e5e5e; } .filter-button { font-size: 18px; border: 1px solid #42B32F; border-radius: 5px; text-align: center; color: #42B32F; margin-bottom: 30px; } .filter-button:hover { font-size: 18px; border: 1px solid #42B32F; border-radius: 5px; text-align: center; color: #ffffff; background-color: #42B32F; } .btn-default:active .filter-button:active { background-color: #42B32F; color: white; } .port-image { width: 100%; } .gallery_product { margin-bottom: 30px; }

$(document).ready(function () { $(".filter-button").click(function () { // alert('buttn'); $(this).siblings().removeClass("active"); $(this).addClass('active'); // Call function when clicked clickToggle(); }); // Call function when window loads clickToggle(); // funtion definition function clickToggle(){ if ($(".filter-button").hasClass("active")) { var value = $('.filter-button.active').attr('data-filter'); // alert(value); $(".filter").not('.' + value).hide('3000'); $('.filter').filter('.' + value).show('3000'); } } });