octocatstartv

Pen Settings

via HTML Inspector

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
              <!Doctype html>
<html>
  <meta charset="UTF-8" />
<head>
  <style>
  .tabrow {
		    text-align: center;
		    list-style: none;
		    margin: 200px 0 20px;
		    padding: 0;
		    line-height: 24px;
		    height: 26px;
		    overflow: hidden;
		    font-size: 12px;
		    font-family: verdana;
		    position: relative;
		}
		.tabrow li {
		    border: 1px solid #AAA;
		    background: #D1D1D1;
		    background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
		    display: inline-block;
		    position: relative;
		    z-index: 0;
		    border-top-left-radius: 6px;
		    border-top-right-radius: 6px;
		    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
		    text-shadow: 0 1px #FFF;
		    margin: 0 -5px;
		    padding: 0 20px;
		}
		.tabrow a {
			  color: #555;
			  text-decoration: none;
		}
		.tabrow li.selected {
		    background: #FFF;
		    color: #333;
		    z-index: 2;
		    border-bottom-color: #FFF;
		}
		.tabrow:before {
		    position: absolute;
		    content: " ";
		    width: 100%;
		    bottom: 0;
		    left: 0;
		    border-bottom: 1px solid #AAA;
		    z-index: 1;
		}
		.tabrow li:before,
		.tabrow li:after {
		    border: 1px solid #AAA;
		    position: absolute;
		    bottom: -1px;
		    width: 5px;
		    height: 5px;
		    content: " ";
		}
		.tabrow li:before {
		    left: -6px;
		    border-bottom-right-radius: 6px;
		    border-width: 0 1px 1px 0;
		    box-shadow: 2px 2px 0 #D1D1D1;
		}
		.tabrow li:after {
		    right: -6px;
		    border-bottom-left-radius: 6px;
		    border-width: 0 0 1px 1px;
		    box-shadow: -2px 2px 0 #D1D1D1;
		}
		.tabrow li.selected:before {
		    box-shadow: 2px 2px 0 #FFF;
		}
		.tabrow li.selected:after {
		    box-shadow: -2px 2px 0 #FFF;
		}
</style>
  
   
</head>

<body>
<div id="tabs">
<ul class="tabrow">
  <li class="selected"><a href="#tab-one">Lorem</a></li>
	<li><a href="#tab-two">Ipsum</a></li>
  <li><a href="#tab-three">Sit amet</a></li>
	<li><a href="#tab-four">Consectetur adipisicing</a></li>
</ul>

<div id="tab-one">

<h3>Tab 1</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat.</p>

</div>

<div id="tab-two">

<h3>Tab 2</h3>

<p>Morbi leo turpis, pellentesque at, luctus et, ornare non, risus. Vivamus orci. Integer placerat aliquam sem. Ut eu nisl in tortor iaculis convallis. Duis accumsan quam sit amet ipsum. Nam pretium. Vestibulum varius sollicitudin eros. Aenean imperdiet dignissim lacus. Donec lacinia turpis ac urna. Nulla libero augue, fringilla et, vulputate dictum, volutpat sit amet, justo. Integer eu lectus sed neque tempus pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent dapibus, urna ac luctus bibendum, augue libero tincidunt dui, ac fringilla odio metus sed purus. </p>

</div>

<div id="tab-three">

<h3>Tab 3</h3>

<p>Integer adipiscing mollis purus. Duis mattis purus et purus. Mauris in pede sit amet nunc tincidunt rhoncus. In hac habitasse platea dictumst. Phasellus at nulla quis arcu pharetra commodo. Mauris suscipit. Nulla sagittis. Morbi fermentum feugiat leo. Vivamus sapien nulla, commodo ut, convallis eget, ullamcorper ut, sapien. Praesent sodales varius pede. </p>

</div>

<div id="tab-four">

<h3>Tab 4</h3>

<p>Integer libero. Aenean porttitor, nibh viverra porttitor eleifend, nulla erat malesuada mauris, a facilisis lacus justo ac enim. Fusce viverra, eros eu cursus posuere, eros nunc viverra turpis, a lacinia arcu nulla nec sem. Curabitur a augue. Pellentesque commodo pede quis quam. Sed sapien ligula, accumsan sed, lobortis vitae, malesuada vitae, est. Duis mollis. Curabitur feugiat ullamcorper ligula. Nullam lectus lacus, congue vel, dictum eu, mattis vel, pede. Quisque auctor felis quis justo.</p>

</div>

</div>

<div>
  <div id="tabsbottom">
	<ul class="tabrow">
	    <li class="selected"><a href="#tabsbottom-five">Bottom Tab One</li>
	    <li><a href="#tabsbottom-six">Bottom Tab Two</a></li>
    </ul>
    
    <div id="tabsbottom-five">
		<p>Tab One (Bottom) Content</p>
    </div>

    <div id="tabsbottom-six">
        <p>Tab Two (Bottom) Content</p>
    </div>
    
  </div>
</div>
  
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <script>
    $(function() {  
  $('#tabs div').hide(); // Hide divs
  $('#tabs div:first').show(); // Show first div
  $("li").click(function(e) {
    e.preventDefault();
    $("li").removeClass("selected");
    $(this).addClass("selected");
    var currentTab = $(this.children).attr('href'); // Set currentTab to value of href attribute
    $('#tabs div').hide(); // Hide all divs
    $(currentTab).show(); // Show div with id equal to variable currentTab
    return false;
  });
});

 $(function() {  
  			$('#tabsbottom div').hide(); // Hide divs
  			$('#tabsbottom div:first').show(); // Show first div
  			
  			$("li").click(function(e) {
   			    e.preventDefault();
   			    
    		$("li").removeClass("selected");
    			$(this).addClass("selected");
    				
            var currentTab = $(this.children).attr('href'); // Set currentTab to value of href attribute
            $('#tabsbottom div').hide(); // Hide all divs
            $(currentTab).show(); // Show div with id equal to variable currentTab
            
            return false;
           });
        });
  </script>
</body>
</html>
            
          
!

CSS

            
              
            
          
!

JS

            
              
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console