In this example below you will see how to do a taBsdiv with some HTML / CSS and Javascript

This awesome code was written by Ferencok, you can see more from this user in the personal repository.
You can find the original code on
Copyright Ferencok ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
      <link rel="stylesheet" href="css/style.css">



  <div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">All</a></li>
        <li><a href="#tab-2">Spraypaint Packs</a></li>
        <li><a href="#tab-3">Records</a></li>
        <li><a href="#tab-4">Markers</a></li>
    <div class="tab">
        <!------------------------ALL PRODUCTS -------------------------------------->
        <div id="tab-1" class="tab-content">
          <div class="itemDetails">
                                   <div class="product">
										<a href="#"><img  class="itemImage" src="imageProducts/spraypacks/94 MULTI PACKS - 24 PACK.jpg" alt="94 MULTI PACKS - 24 PACK" /></a>
										<button class="info btnStyle">More info</button>
										<p class="itemText">Price: €90</p>
										<button class="btnAdd add">Add to cart</button>
										<div class="infoBlock infoBox">
											<button class="closeButton">X</button>
											<a href="#"><img class="infoImage left" src="imageProducts/spraypacks/94 MULTI PACKS - 12 PACK.jpg" alt="94 MULTI PACKS - 12 PACK" /></a>

											<span class="right" style="display:block;">
												<h3>94 MULTI PACKS - 12 PACK</h3>
												<br class="clear">
												<p>The best selection for any Piece, TWELVE cans of Montana 94, original spanish spray-paint, equipped with Skinny 94 Caps. Low Pressure Paint - best for detail!!! Best colour range - 180 COLOURS!!!! 
												Free bag of 6 Mixed Caps & Latex Gloves!! </p>
												<p class="itemText">Price: €45</p>
											<button class="infoBlockAddCartBtn add left">Add to cart</button>
      <!-------------------------- SPRAY PACKS ------------------------------------>
        <div id="tab-2" class="tab-content">
            <p>Donec sempera.</p>
        <!--------------------------RECORDS VYNILS ------------------------------------>
        <div id="tab-3" class="tab-content">
            <p>Duis  porta. </p>
        <!--------------------------  MARKERS  ------------------------------->
        <div id="tab-4" class="tab-content">
            <p>Proin sollici odio. </p>
  <script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
body {
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
font-size: 14px;        

.tabs-menu {
  overflow: auto;
  width: 960px;
  list-style: none;
  margin: 0 auto;
  padding-top: 20px;
  clear: both;

.tabs-menu li {
    margin: 0;
    padding: 0;
    float: left;

.tabs-menu li.current {
    position: relative;
    background-color: #fff;
    z-index: 5;

.tabs-menu li a {
    box-shadow: -2px 0 0 rgba(0, 0, 0, .2);
    background: #BD222B;
    background: linear-gradient(42deg, transparent 17px, #BD222B 19px);
    color: #fff;
    float: left;
    font: bold 16px/35px  "Montserrat", Arial, Helvetica;
    height: 35px;
    padding: 0 40px;
    text-decoration: none;
    border-radius: 3px;
.tabs-menu li a:hover{
   background: #c93434;
    color: #000;    
    background: linear-gradient(218deg, transparent 17px, #22bdb4 20px);
.tabs-menu li a:focus{
        outline: 0 ;

.tabs-menu .current a {
    background: #fff;
    text-shadow: none;    
    color: #333;
    box-shadow: 0px 2px 9px rgba(0, 0, 0, 1), 
      4px 0px 0px rgba(0, 0, 0, 0.2) inset;

.tab {
    height: auto;
    background-color: ;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 2px 10px #000, 0 -1px 0 #fff inset;
    padding: 10px 10px;
    width: 980px;
    margin: 0 auto 3%;
    overflow: hidden;
    background: rgba(179, 204, 204, 0.4);

.tab-content {
    width: ;
    padding: 20px;
    display: none;

#tab-1 {
 display: block;   

/************** Products list**************** */

.product img{ text-align: center;}
    float: left;
    border: solid 1px #cfcfcf;
    width: 194px;
    margin-left: 18px;
    padding: 15px;
    margin-top: 1%;
	position: relative;
.items ul li p span{ color:#890000}
.items ul li p.price{ color:#890000; font-size:1em; font-weight: 900; padding-top:15px; }

/*Downloaded from */
$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");