taBsdiv

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

Thumbnail
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 Codepen.io
Copyright Ferencok ©

Technologies

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

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

  
</head>

<body>

  <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>
    </ul>
  
  
    <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>
											</span>
											<button class="infoBlockAddCartBtn add left">Add to cart</button>
										</div>
									</div>
   </div>
          </div>
      
      
      <!-------------------------- SPRAY PACKS ------------------------------------>
        <div id="tab-2" class="tab-content">
            <p>Donec sempera.</p>
        
        </div>
        <!--------------------------RECORDS VYNILS ------------------------------------>
        <div id="tab-3" class="tab-content">
            <p>Duis  porta. </p>
        </div>
        <!--------------------------  MARKERS  ------------------------------->
        <div id="tab-4" class="tab-content">
            <p>Proin sollici odio. </p>
        </div>
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Ferencok/tabsdiv-mPojwy */
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;}
.product{ 
    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 https://www.codeseek.co/Ferencok/tabsdiv-mPojwy */
$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});

Comments