TP Tab Styling

index.html

<div class="container" id="draggable">

	<ul class="tabs" >
		<li class="tab-link current bShads" data-tab="tab-1">Reference</li>
		<li class="tab-link" data-tab="tab-2">Warnings</li>
		<li class="tab-link" data-tab="tab-3">Terms</li>
	</ul>

	<div id="tab-1" class="tab-content current">
  
  <div class="search">
    <input id="search-box" name="focus" required class="search-box" type="text" placeholder="Search here">
    <button class="closeButton">
    </button>
  </div>
  
  <div class="secondContent">
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    
    <p>Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.</p>
    
    <p>Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.</p>
    
    <p>Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.</p>
  </div>
  
	
	</div> <!-- end tab -->
	<div id="tab-2" class="tab-content">
		<p>Second Tab dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    
    <p>Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.</p>
    
    <p>Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.</p>
    
    <p>Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.</p>
	</div>
	<div id="tab-3" class="tab-content">
   
  
    
   
      
		<p>Third Tab dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    
    <p>Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.</p>
    
    <p>Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.</p>
    
    <p>Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum.</p>
    </div>
  
	

</div><!-- container -->

qbNmjP.markdown

qbNmjP

A Pen by Josh Peters on CodePen.

License.

script.js

//Obviously totally usable, but hacky.

$(document).ready(function(){
	
	$('ul.tabs li').click(function(){
		var tab_id = $(this).attr('data-tab');

		$('ul.tabs li').removeClass('current');
		$('.tab-content').removeClass('current');

		$(this).addClass('current');
		$("#"+tab_id).addClass('current');
   
    
	}),
  
  $('.closeButton').click(function () {
    $('#search-box').val('');
	})

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body{
			margin-top: 0;
			font-family: 'DINPro', serif;
			line-height: 1.6;
      font-size: 14px;
      margin-top: 40px;
		}
		.container{
			max-width: 376px;
			margin: 0 auto;
      position: relative;
		}

p {
  margin: 20px 0;
}



		ul.tabs{
			margin: 0px;
			padding: 0px;
			list-style: none;
      position: absolute;
      z-index: 100;
      
      width: 100%;
      
		}
		ul.tabs li{
			background: none;
			color: #999;
			display: inline-block;
			padding: 10px 4%;
			cursor: pointer;
     }
     
     ul.tabs li:hover {
       color: #333
     }

		ul.tabs li.current{
			background: #FFF;
			color: #222;
      border-left: 1px solid #CCC;
      border-top: 1px solid #EEBA4C;
      border-right: 1px solid #CCC;
      border-bottom: 1px solid #FFF;
      font-weight: 700;
      position: relative;
      box-shadow: inset 0 2px 0px #EEBA4C;
		}
    
    .bShads {
       background: red;
      
    }
    

		.tab-content{
			display: none;
			background: #FFF;
			padding: 0;
      position: absolute;
      top: 43px;
      z-index: 10;
     
		}

		.tab-content.current{
			display: inherit;
      border: 1px solid #CCC
      position: relative;
      border: 1px solid #CCC;
      max-width: 376px;
      box-shadow: 0 0 3px #CCC;
		}
    
.secondContent {
  padding: 10px 20px;
  border-top: 1px solid #CCC;
}

.secondContent p:first-child {
  margin-top: 0;
}
    
.search {
  background: #FFF;
  margin: 12px 8px;
  border: 1px solid #CCC;
  border-radius: 2px;
  position: relative;
}

input {
  display:block; 
  width:97.44%;
  padding: 0;
  padding-left: 2.65%;
  padding-bottom: 2px;
  border-width:0;
  height: 32px;
  font-size: 16px;
  font-family: "DINPro";
  outline: none;
}

input[type=text]:focus {
  box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}

/* .closeButton {
  position: absolute;
  right: 10px;
  top: 7px;
  display: inline-block;
} */

.closeButton {
  width: 10px;
  height: 10px;
  position: absolute;
  right: 10px;
  top: 11px;
  display: inline-block;
  border: none;
  background: url('http://cicadaonline.com/tp/close-button.png') no-repeat top center;
  padding: 0;
  cursor: pointer
  
}

.search-box:not(:valid) ~ .closeButton {
	display: none;
}