Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Credit : https://codepen.io/cssjockey/pen/jGzuK -->
<!-- Article Detail : http://devahoy.com/2015/02/how-to-create-tab-content/-->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DevAhoy.com - Create Tab Content in CSS/Javascript</title>
	<link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
</head>
<body>
	
	<div class="container">
    <h1>Tab Content Example</h1>

    <div class="tab-example">
      <ul class="tabs">
        <li class="tab-link current" data-tab="home">Home</li>
        <li class="tab-link" data-tab="contact">Contact</li>
        <li class="tab-link" data-tab="works">Works</li>
        <li class="tab-link" data-tab="about">About</li>
      </ul>
      <div class="tab-contents">
        <div class="tab-pane current" id="home">
        	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate quis lacus vel sollicitudin. In in mauris ac diam facilisis volutpat. Nullam vitae vehicula eros. Mauris nulla lacus, ornare id quam a, blandit imperdiet leo. Sed rutrum sem at dolor blandit tempus. Nullam fermentum orci rhoncus elementum finibus. Etiam semper facilisis euismod. Nunc ac purus malesuada turpis ullamcorper ultricies. Proin nisl dolor, imperdiet sed maximus id, consectetur et est. Suspendisse hendrerit lacus sit amet urna faucibus finibus. Nullam placerat lacus ut ante porttitor viverra.
        </div>
        <div class="tab-pane" id="contact">
        	Vestibulum vel iaculis mi, sed laoreet neque. Nullam lectus mauris, rhoncus sed porttitor ac, faucibus eu orci. Donec malesuada elit pulvinar ex tempus dictum. Praesent pharetra convallis justo sit amet blandit. Sed lacinia leo ac arcu commodo maximus.
        </div>
        <div class="tab-pane" id="works">
        	Etiam facilisis eleifend ante sed congue. Aliquam erat volutpat. Pellentesque auctor, arcu quis dapibus eleifend, nulla ex elementum nisl, vel tempor orci urna in metus. Nunc lectus velit, convallis vestibulum erat non, aliquet vehicula lectus. Donec et pulvinar ligula, a ultricies libero. Nulla vitae libero nunc. Etiam sed pellentesque enim, ut pulvinar lectus. Nam vel dui ac mauris finibus porttitor at eget enim.
        </div>
        <div class="tab-pane" id="about">
        	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate, ipsum vel pharetra ullamcorper, est magna suscipit purus, gravida eleifend sapien magna sit amet enim. Integer sagittis eros sed ligula dignissim interdum. Suspendisse maximus nibh in auctor vulputate.
        </div>
      </div>
    </div>

	</div>

	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</body>
</html>
              
            
!

CSS

              
                body {
	margin-top: 80px;
	font-family: "Varela Round", sans-serif;
}
.container {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
}

h1 {
	text-align: center;
}

.tabs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tabs li {
	display: inline-block;
	padding: 15px 25px;
	background: none;
	text-transform: uppercase;
	cursor: pointer;
}

.tabs li.current {
	background: #e9e9e9;
}

.tab-contents {
	background: #e9e9e9;
	padding: 20px;
}

.tab-pane {
	display: none;
}

.tab-pane.current {
	display: block;
}
              
            
!

JS

              
                $(function() {
	$('.tabs li').on('click', function() {
		var tabId = $(this).attr('data-tab');

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

		$(this).addClass('current');
		$('#' + tabId).addClass('current');
	});
});
              
            
!
999px

Console