<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div> <button class="active btn" id="all">Show All</button> <button class="btn" id="a">Show A</button> <button class="btn" id="b">Show B</button> <button class="btn" id="c">Show C</button> <button class="btn" id="d">Show D</button> <div class="spacer"></div> <div id="parent"> <div class="box a b">A & B</div> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> </div> </div>

* { box-sizing: border-box; } body { padding: 10px; background: #ecf0f1; font-family: helvetica, sans-serif; font-weight: 200; } .btn { border: none; background: linear-gradient(to bottom, #3498db, #2980b9); border-radius: 3px; font-family: Arial; color: #ffffff; padding: 5px 10px 5px 10px; text-decoration: none; margin: 5px; } .active { background: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; } .box { background-image: linear-gradient(to bottom, #3498db, #2980b9); padding: 10px; height: 100px; width: calc(25% - 10px); float: left; margin: 5px; text-align: center; border-radius: 3px; color: #fff; } .spacer { clear: both; height: 20px; }

$(document).ready(function() { var $btns = $('.btn').click(function() { if (this.id == 'all') { $('#parent > div').fadeIn(450); } else { var $el = $('.' + this.id).fadeIn(450); $('#parent > div').not($el).hide(); } $btns.removeClass('active'); $(this).addClass('active'); }) });