<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 ----------> <section id="products"> <div class="container"> <h1>Products</h1> <div class="menu flexit"> <div class="label-item flex-1 flexit"> <span id="one" class="item">One</span> </div> <div class="label-item flex-1 flexit"> <span id="two" class="item">Two</span> </div> <div class="label-item flex-1 flexit"> <span id="three" class="item">Three</span> </div> <div class="label-item flex-1 flexit"> <span id="four" class="item">Four</span> </div> <div class="label-item flex-1 flexit"> <span id="all" class="item active">All</span> </div> </div> <div class="products"> <div id="type_one" class="col-xs-12 col-sm-6 col-md-3 product active"> <a href="#"> <div class="image km-img-bg img-1"></div> <p>Product One</p> </a> </div> <div id="type_two" class="col-xs-12 col-sm-6 col-md-3 product active"> <a href="#"> <div class="image km-img-bg img-1"></div> <p>Product Two</p> </a> </div> <div id="type_three" class="col-xs-12 col-sm-6 col-md-3 product active"> <a href="#"> <div class="image km-img-bg img-1"></div> <p>Product Three</p> </a> </div> <div id="type_four" class="col-xs-12 col-sm-6 col-md-3 product active"> <a href="#"> <div class="image km-img-bg img-1"></div> <p>Product Four</p> </a> </div> </div> <div class="clearfix"></div> </div> </section>

.flexit{ display: flex; align-items: center; justify-content: center; } .flex-1{ flex: 1; } section#products{ padding: 50px 0; } section#products a{ color: black; } section#products h1{ text-transform: uppercase; text-align: center; font-weight: bold; font-size: 50px; color: #00609c; margin: 0; } section#products .menu{ padding: 25px 0; } section#products .menu .label-item{ border-right: 1px solid #595757; } section#products .menu span.item{ text-transform: uppercase; text-align: center; color: #595757; width: 85%; } section#products .menu span.item:hover{ cursor: pointer; } section#products .menu .label-item:last-child{ border-right: 0px solid black; } section#products .menu span.item span.underline{ border-bottom: 1px solid transparent; position: relative; display: block; margin: auto; width: 60%; top: 5px; } section#products .menu span.item.active{ color: #2cadef; } section#products .products{ text-align: center; font-weight: bold; min-height: 300px; } section#products .products .product{ display: none; } section#products .products .product.active{ display: block; } section#products .products .product .image{ height: 230px; width: 230px; margin: auto; background-size:cover; } /*PRODUCTS*/ section#products .products .product .image.img-1{ background-image: url(https://cdn3.iconfinder.com/data/icons/line-icons-medium-version/64/photo-512.png); } section#products .buttons{ margin-top: 25px; } section#products .buttons button.btn{ background-color: #219ae2; text-transform: uppercase; padding: 10px 50px; font-weight: 600; min-width: 325px; color: white; } @media (max-width: 767px) { section#products .buttons{ display: block; } section#products .buttons button.btn{ margin-bottom: 15px; width: 100%; } section#products .menu{ flex-direction: column; } section#products .menu .label-item{ border-right: 1px solid transparent; width: 100%; } section#products .menu span.item.active{ color: #2cadef; } }

$(".menu .item").click(function(){ if (!$(this).hasClass( "active" )) { $(".menu span").removeClass("active"); $(this).addClass("active"); if(this.id == "all"){ $(".product").addClass("active"); }else{ $(".product").removeClass("active"); $(".product#type_" + this.id).addClass("active"); } } });