<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/somecallmejosh/pen/sFtdf?depth=everything&order=popularity&page=15&q=tab&show_forks=false" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Antic+Slab|PT+Sans:400,700' rel='stylesheet' type='text/css'>
<style class="cp-pen-styles">* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "PT Sans", sans-serif;
padding-top: 20px;
background: #4d4d4d url("https://subtlepatterns.com/patterns/grey_wash_wall.png");
}
h1 {
padding-bottom: 0.25em;
border-bottom: #999999 1px solid;
position: relative;
}
h1:after {
position: absolute;
display: block;
width: 100%;
height: 1px;
bottom: -2px;
background-color: rgba(255, 255, 255, 0.5);
content: " ";
}
[class^="slide__"] {
overflow: hidden;
width: 70%;
margin: 0 auto;
-moz-box-shadow: 0 0 30px #1a1a1a;
-webkit-box-shadow: 0 0 30px #1a1a1a;
box-shadow: 0 0 30px #1a1a1a;
}
[class^="slide__"] [class^="slide--tabs"] ul {
margin: 0;
padding: 0;
}
[class^="slide__"] [class^="slide--tabs"] li {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0.5em;
color: #999999;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fff;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
-webkit-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
[class^="slide__"] [class^="slide--tabs"] li:hover {
cursor: pointer;
color: #4d4d4d;
background-image: none;
background-color: #bfbfbf;
}
[class^="slide__"] [class^="slide--tabs"] li:active {
color: #1a1a1a;
background-image: none;
background-color: #b3b3b3;
-moz-box-shadow: inset 0 0 10px #d9d9d9;
-webkit-box-shadow: inset 0 0 10px #d9d9d9;
box-shadow: inset 0 0 10px #d9d9d9;
}
[class^="slide__"] [class^="slide--tabs"] li.is-active {
color: black;
background-image: none;
background-color: #ccc;
pointer-events: none;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
[class^="slide__"] [class$="content"] {
background-color: #ccc;
position: relative;
overflow: hidden;
padding: 0 20px;
}
[class^="slide__"] [class$="content"] [class$="pane"], [class^="slide__"] [class$="content"] [class$="is-visible"] {
-moz-transition: all ease-in-out;
-o-transition: all ease-in-out;
-webkit-transition: all ease-in-out;
transition: all ease-in-out;
}
[class^="slide__"] [class$="content"] [class$="pane"] {
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
position: absolute;
top: 0;
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-webkit-transform: translateX(200%);
transform: translateX(200%);
width: 100%;
/*+opacity(0) */
}
[class^="slide__"] [class$="content"] [class$="is-visible"] {
/*+opacity(1) */
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
width: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
[class$="__stacked"] [class$="tabs"] {
width: 100%;
}
[class$="__stacked"] [class$="tabs"] li {
float: left;
margin: 0;
padding: 0;
width: 33.33333%;
line-height: 3em;
border-left: #ccc 1px solid;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9));
background-image: -moz-linear-gradient(#ffffff, #d9d9d9);
background-image: -webkit-linear-gradient(#ffffff, #d9d9d9);
background-image: linear-gradient(#ffffff, #d9d9d9);
}
[class$="__stacked"] [class$="content"] {
width: 100%;
}
[class$="__side-by-side"] [class$="tabs"] {
float: left;
width: 20%;
}
[class$="__side-by-side"] [class$="tabs"] li {
line-height: 70px;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U2ZTZlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(100%, #e6e6e6));
background-image: -moz-linear-gradient(#f2f2f2, #e6e6e6);
background-image: -webkit-linear-gradient(#f2f2f2, #e6e6e6);
background-image: linear-gradient(#f2f2f2, #e6e6e6);
}
[class$="__side-by-side"] [class$="content"] {
float: right;
width: 80%;
height: 210px;
}
</style></head><body>
<!-- / .slide__side-by-side or slide__stacked -->
<div class='slide__side-by-side'>
<div class='slide--tabs'>
<ul>
<li>
<i class='fa fa-caret-right'></i>
Coffee
</li>
<li>
<i class='fa fa-caret-right'></i>
Wine
</li>
<li>
<i class='fa fa-caret-right'></i>
Love
</li>
</ul>
</div>
<div class='slide--content'>
<div class='slide--content__pane'>
<h1>
<i class='fa fa-coffee'></i>
A Dose of Joe
</h1>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class='slide--content__pane'>
<h1>
<i class='fa fa-glass'></i>
A Dash of Spirit
</h1>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class='slide--content__pane'>
<h1>
<i class='fa fa-heart'></i>
A Bundle of Love
</h1>
<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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.0.3.min.js'></script>
<script >// initialize is-active and is-visible states on "first" tab and slides.
$("[class^=slide]").find("li").eq(0).addClass("is-active");
$("[class$=content]").find("[class$=pane]").eq(0).addClass("slide--content__pane--is-visible");
// click functions for tabs and slides
$("[class^=slide]").on("click", "li", function(){
var $this = $(this),
listIndex = $this.index(); // gets the index of the clicked list item
// add active class to currently "clicked" list item
$this.closest("ul").find("li").removeClass("is-active"); // remove class from previously clicked li's
$this.addClass("is-active"); // add to newly clicked li
// display associated pane and associate the pane of the same index with the list item being clicked
var paneIndex = $(".slide--content__pane:eq(" + listIndex + ")");
$(".slide--content").children().removeClass("slide--content__pane--is-visible");
paneIndex.addClass("slide--content__pane--is-visible");
});
//# sourceURL=pen.js
</script>
</body></html>
