123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <section id="jbPanels">

  <nav class="panelNav">
		<div>
			<a href="#panel1">Lorem Ipsum</a>
			<a href="#panel2">Cupcake Ipsum</a>
			<a href="#panel3">Bacon Ipsum</a>
			<a href="#panel4">Star Wars Ipsum</a>
		</div>
	</nav>

	<section class="panelContent" data-panelContent-animation="fade">
		<div id="panel1">
			<div class="animator">
				<h2>Animations</h2>
				<ul>
					<li><a href="" data-animation-type="fade">Fade</a></li>
					<li><a href="" data-animation-type="slide">Slide</a></li>
					<li><a href="" data-animation-type="scale">Scale</a></li>
				</ul>
			</div>
			<h1>Lorem ipsum dolor sit amet</h1>
			<p>Consectetur adipiscing elit. Nulla tincidunt, augue vel gravida tempor, nisi neque commodo sem, imperdiet sollicitudin purus mi sed mauris. Phasellus arcu metus, interdum eget hendrerit ut, laoreet in magna. Nullam ac nisi ante. Integer tincidunt nisl eget augue elementum et feugiat dui rutrum. Nullam bibendum mollis accumsan. Praesent aliquam elit ipsum. Donec in elit ipsum. Suspendisse nec ligula ligula, in malesuada odio. Cras eros ante, condimentum eu facilisis a, ultricies a quam.</p>
			<p>Sed bibendum fermentum sodales. Fusce ac turpis sapien. Sed in felis id mi consectetur blandit vel ut quam. Praesent risus magna, iaculis id pulvinar ut, ultricies et nunc. Aenean quam dolor, dignissim ac tincidunt non, vehicula ac dui. Proin odio mi, interdum non porta sit amet, bibendum nec nisl. Morbi adipiscing nunc sapien. Suspendisse dapibus, eros sit amet varius tincidunt, neque nisi porta diam, non volutpat diam augue porta lorem. Quisque sollicitudin mollis lobortis. Praesent imperdiet posuere diam, in tincidunt nisl imperdiet vel. Mauris at nibh dignissim arcu vestibulum porttitor sit amet ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
			<p>Integer nec ipsum justo. Nunc nec tincidunt tellus. In euismod tellus quis nulla auctor at sollicitudin mauris faucibus. Cras a odio nunc, cursus lobortis quam. Aenean id lorem at odio laoreet luctus id quis nisi. Fusce ac dui est, et bibendum eros. Vivamus et enim quis urna suscipit fermentum quis in risus. Nullam placerat luctus purus, ut blandit elit congue vitae. Sed eget nulla nec dolor consectetur gravida nec at nisi. Sed dignissim, nibh et euismod viverra, nunc nunc dignissim quam, quis ullamcorper risus tortor in eros. Sed malesuada rutrum interdum. Donec pharetra, urna eu ultrices dictum, justo lorem cursus diam, vel tempus nisl mauris ac ligula. Phasellus urna nisi, scelerisque sed lacinia sed, eleifend sed nisi. Phasellus condimentum semper dolor in porta. Nulla euismod urna molestie dui dictum malesuada. Donec molestie consequat eros quis sagittis.</p>
		</div>
		<div id="panel2">
			<h1>Cupcake ipsum dolor sit amet</h1>
			<p>Lollipop jujubes ice cream. Jelly liquorice jujubes cake ice cream sugar plum fruitcake macaroon. Cookie jelly soufflé marshmallow dragée sweet roll wypas dragée gummi bears. Cupcake wypas bonbon sweet chupa chups.</p>
			<p>Gingerbread soufflé croissant dessert muffin tart. Sweet roll pudding applicake croissant sweet candy canes soufflé pudding topping. Jelly pudding wypas cheesecake wypas tart.</p>
			<p>Topping marzipan chupa chups topping gingerbread jujubes jujubes chocolate. Sugar plum cupcake soufflé gummi bears liquorice muffin macaroon. Lemon drops sweet gingerbread sesame snaps. Faworki brownie cake marzipan caramels cheesecake bear claw pie.</p>
			<p>Chupa chups cupcake cupcake. Jelly-o cheesecake chocolate cake lollipop cupcake tiramisu muffin. Gingerbread pudding macaroon cheesecake tootsie roll caramels oat cake gummi bears. Ice cream pie marzipan candy gummi bears.</p>
			<p>Chocolate bar candy canes applicake cake sweet roll candy brownie. Marshmallow apple pie bonbon candy dessert liquorice. Muffin caramels powder halvah.</p>
		</div>
		<div id="panel3">
			<h1>Bacon ipsum dolor sit amet</h1>
			<p>Shoulder swine shankle, pancetta jerky andouille bresaola turkey. Filet mignon short loin meatball biltong prosciutto. Ribeye leberkas ham jowl venison drumstick. Swine pork tongue shoulder meatloaf. Beef ribs jowl hamburger bresaola capicola shank t-bone ham hock cow spare ribs tail. Corned beef meatloaf rump, turkey leberkas pork belly brisket sirloin beef fatback. Pork jowl ground round drumstick, short loin shank tenderloin meatloaf beef ribs tri-tip shankle frankfurter boudin t-bone pork belly.</p>
			<p>Shoulder ribeye leberkas rump brisket fatback. Venison tenderloin pork belly tri-tip chuck, shank shankle leberkas tongue chicken turducken ham. Ham short ribs ribeye flank beef, pig beef ribs bresaola pork chop meatloaf turducken andouille. Meatloaf meatball bacon corned beef. Ribeye jowl shank bresaola leberkas ham pork loin hamburger chicken prosciutto tri-tip strip steak pork chop fatback. Frankfurter capicola boudin ground round short loin, tongue ham hock jerky pork belly. Tail pork belly pork loin filet mignon andouille shank capicola fatback.</p>
			<p>Kielbasa rump capicola shank. Chuck tongue meatball, pork bacon corned beef prosciutto chicken strip steak turducken tri-tip shankle. Pork kielbasa shankle, turkey meatball short loin ball tip corned beef bacon short ribs sirloin. Prosciutto beef ham hock, swine pork loin sausage kielbasa biltong venison jowl shank pig tenderloin salami meatball. Fatback shoulder shankle tri-tip tenderloin pastrami turducken chuck flank frankfurter salami bacon filet mignon meatloaf. Hamburger ball tip ham hock fatback, pastrami salami andouille spare ribs bresaola drumstick meatloaf cow sausage.</p>
		</div>
		<div id="panel4">
			<h1>Star Wars ipsum dolor sit amet</h1>
			<p>Look, I ain't in this for your revolution, and I'm not in it for you, Princess. I expect to be well paid. I'm in it for the money. Ye-ha! I need your help, Luke. She needs your help. I'm getting too old for this sort of thing. You mean it controls your actions?</p>
			<h2>It's a Trap!</h2>
			<p>Don't act so surprised, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to know what happened to the plans they sent you. I call it luck. I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan.</p>
			<ul>
				<li>Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force.</li>
				<li>I'm surprised you had the courage to take the responsibility yourself.</li>
				<li>You don't believe in the Force, do you?</li>
				<li>You mean it controls your actions?</li>
			</ul>
			<h3>Revenge of the Sith</h3>
			<p>Leave that to me. Send a distress signal, and inform the Senate that all on board were killed. She must have hidden the plans in the escape pod. Send a detachment down to retrieve them, and see to it personally, Commander. There'll be no one to stop us this time! What?! I'm surprised you had the courage to take the responsibility yourself. Escape is not his plan. I must face him, alone. He is here.</p>
			<h4>Attack of the Clones</h4>
			<p>He is here. Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. I want to come with you to Alderaan. There's nothing for me here now. I want to learn the ways of the Force and be a Jedi, like my father before me.</p>
			<ol>
				<li>Don't act so surprised, Your Highness. You weren't on any mercy mission this time. Several transmissions were beamed to this ship by Rebel spies. I want to know what happened to the plans they sent you.</li>
				<li>You don't believe in the Force, do you?</li>
				<li>Dantooine. They're on Dantooine.</li>
			</ol>
			<h5>The Republic</h5>
			<p>You are a part of the Rebel Alliance and a traitor! Take her away! But with the blast shield down, I can't even see! How am I supposed to fight? You mean it controls your actions?</p>
		</div>
	</section>

</section>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Open+Sans);

#jbPanels {
  width: 100%;
}

#jbPanels .panelNav{
	width: 100%;
	height: 60px;
	margin: 0 auto 0 auto;
	overflow: hidden;
	position: relative;
}

#jbPanels .panelNav div{
	width: 100%;
	height: 59px;
	list-style: none;
	text-align: center;
	cursor: default;
	position: relative;
	top: 0;
	left: 0;
	border-bottom: #D7D7D7 1px solid;
	background: #F5F5F5;
}

#jbPanels .panelNav a{
	display: inline-block;
	font-size: 0.875em;
	text-decoration: none;
	color: #525252;
	line-height: 1.2em;
	white-space: nowrap;
	margin: 0 2% 0 2%;
	position: relative;
	top: 0;
	left: 0;
}

#jbPanels .panelNav ul li:first-child{
	margin-left: 0px;
}

#jbPanels .panelNav ul li:last-child{
	margin-right: 0px;
}

#jbPanels .panelNav a.active{
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 50px;
	font-weight: 600;
	animation:activeNotch 0.3s;
	animation-iteration-count: once;
	-webkit-animation:activeNotch 0.3s;
	-webkit-animation-iteration-count: once;
	-moz-animation:activeNotch 0.3s;
	-moz-animation-iteration-count: once;
	-o-animation:activeNotch 0.3s;
	-o-animation-iteration-count: once;
}

@keyframes activeNotch {
	0%   { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 61px; }
	100% { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 50px; }
}
@-webkit-keyframes activeNotch {
	0%   { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 61px; }
	100% { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 50px; }
}
@-moz-keyframes activeNotch {
	0%   { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 61px; }
	100% { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 50px; }
}
@-o-keyframes activeNotch {
	0%   { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 61px; }
	100% { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 50px; }
}

#jbPanels .panelNav a.inactive{
	background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 61px;
	animation:inactiveNotch 0.3s;
	animation-iteration-count: once;
	-webkit-animation:inactiveNotch 0.3s;
	-webkit-animation-iteration-count: once;
	-moz-animation:inactiveNotch 0.3s;
	-moz-animation-iteration-count: once;
	-o-animation:inactiveNotch 0.3s;
	-o-animation-iteration-count: once;
}

@keyframes inactiveNotch {
	0%   { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 50px; }
	100% { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 61px; }
}
@-webkit-keyframes inactiveNotch {
	0%   { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 50px; }
	100% { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 61px; }
}
@-moz-keyframes inactiveNotch {
	0%   { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 50px; }
	100% { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 61px; }
}
@-o-keyframes inactiveNotch {
	0%   { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 50px; }
	100% { background: 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAKCAMAAABhV5WtAAAAElBMVEXX19cAAADNzc309PTS0tL///+rSSKZAAAAAnRSTlNOABhpr7MAAAAvSURBVHjaRcjJEQAgAINAvPpv2Y9CPmGW8cYs/++1bemISEdECpFCpBApRAqj8AKYEgIGgdmR5gAAAABJRU5ErkJggg==) no-repeat center 61px; }
}

#jbPanels .panelContent{
	width:960px;
	margin: 10px auto 0 auto;
	position: relative;
	overflow: hidden;
}

#jbPanels .panelContent > div{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.no-js #jbPanels .panelContent > div{
	display: block;
}

#jbPanels .panelContent > div.active{
	display: block;
	z-index: 99;
}

#jbPanels .panelContent > div.inactive{
	display: none; visibility: hidden;
}

/* Messy, prefixed, fancy CSS3 animations*/

#jbPanels [data-panelContent-animation="fade"] > div.active{
	animation:activePanelContentFade 0.25s;
	animation-iteration-count: once;
	-webkit-animation:activePanelContentFade 0.25s;
	-webkit-animation-iteration-count: once;
	-moz-animation:activePanelContentFade 0.25s;
	-moz-animation-iteration-count: once;
	-o-animation:activePanelContentFade 0.25s;
	-o-animation-iteration-count: once;
}

@keyframes activePanelContentFade {
	0%		{ opacity: 0; }
	100%	{ opacity: 1; }
}
@-webkit-keyframes activePanelContentFade {
	0%		{ opacity: 0; }
	100%	{ opacity: 1; }
}
@-moz-keyframes activePanelContentFade {
	0%		{ opacity: 0; }
	100%	{ opacity: 1; }
}
@-o-keyframes activePanelContentFade {
	0%		{ opacity: 0; }
	100%	{ opacity: 1; }
}

#jbPanels [data-panelContent-animation="fade"] > div.inactive{
	display: block;
	visibility: hidden;
	opacity: 0;
	animation:inactivePanelContentFade 0.25s;
	animation-iteration-count: once;
	-webkit-animation:inactivePanelContentFade 0.25s;
	-webkit-animation-iteration-count: once;
	-moz-animation:inactivePanelContentFade 0.25s;
	-moz-animation-iteration-count: once;
	-o-animation:inactivePanelContentFade 0.25s;
	-o-animation-iteration-count: once;
}

@keyframes inactivePanelContentFade {
	0%		{ opacity: 1; visibility: visible;}
	100%	{ opacity: 0;}
}
@-webkit-keyframes inactivePanelContentFade {
	0%		{ opacity: 1; visibility: visible;}
	100%	{ opacity: 0;}
}
@-moz-keyframes inactivePanelContentFade {
	0%		{ opacity: 1; visibility: visible;}
	100%	{ opacity: 0;}
}
@-o-keyframes inactivePanelContentFade {
	0%		{ opacity: 1; visibility: visible;}
	100%	{ opacity: 0;}
}

#jbPanels [data-panelContent-animation="slide"] > div.active{
	animation:activePanelContentSlide 0.5s;
	animation-iteration-count: once;
	-webkit-animation:activePanelContentSlide 0.5s;
	-webkit-animation-iteration-count: once;
	-moz-animation:activePanelContentSlide 0.5s;
	-moz-animation-iteration-count: once;
}

@keyframes activePanelContentSlide {
	0%		{ opacity: 0; left:-100% }
	100%	{ opacity: 1; left:0; }
}
@-webkit-keyframes activePanelContentSlide {
	0%		{ opacity: 0; left:-100% }
	100%	{ opacity: 1; left:0; }
}
@-moz-keyframes activePanelContentSlide {
	0%		{ opacity: 0; left:-100% }
	100%	{ opacity: 1; left:0; }
}

#jbPanels [data-panelContent-animation="slide"] > div.inactive{
	display: block;
	visibility: hidden;
	opacity: 0;
	animation:inactivePanelContentSlide 0.5s;
	animation-iteration-count: once;
	-webkit-animation:inactivePanelContentSlide 0.5s;
	-webkit-animation-iteration-count: once;
	-moz-animation:inactivePanelContentSlide 0.5s;
	-moz-animation-iteration-count: once;
}

@keyframes inactivePanelContentSlide {
	0%		{ opacity: 1; left:0; visibility: visible;}
	100%	{ opacity: 0; left:100%; }
}
@-webkit-keyframes inactivePanelContentSlide {
	0%		{ opacity: 1; left:0; visibility: visible;}
	100%	{ opacity: 0; left:100%; }
}
@-moz-keyframes inactivePanelContentSlide {
	0%		{ opacity: 1; left:0; visibility: visible;}
	100%	{ opacity: 0; left:100%; }
}

#jbPanels [data-panelContent-animation="scale"] > div.active{
	animation:activePanelContentScale 0.5s;
	animation-iteration-count: once;
	-webkit-animation:activePanelContentScale 0.5s;
	-webkit-animation-iteration-count: once;
	-moz-animation:activePanelContentScale 0.5s;
	-moz-animation-iteration-count: once;
}

@keyframes activePanelContentScale {
	0%		{transform: scale(0);}
	50%		{transform: scale(0);}
	100%	{transform: scale(1);}
}
@-webkit-keyframes activePanelContentScale {
	0%		{-webkit-transform: scale(0);}
	50%		{-webkit-transform: scale(0);}
	100%	{-webkit-transform: scale(1);}
}
@-moz-keyframes activePanelContentScale {
	0%		{-moz-transform: scale(0);}
	50%		{-moz-transform: scale(0);}
	100%	{-moz-transform: scale(1);}
}

#jbPanels [data-panelContent-animation="scale"] > div.inactive{
	display: block;
	visibility: hidden;
	animation:inactivePanelContentScale 0.5s;
	animation-iteration-count: once;
	-webkit-animation:inactivePanelContentScale 0.5s;
	-webkit-animation-iteration-count: once;
	-moz-animation:inactivePanelContentScale 0.5s;
	-moz-animation-iteration-count: once;
}
@keyframes inactivePanelContentScale {
	0%		{visibility: visible; transform: scale(1);}
	50%		{visibility: visible; transform: scale(0);}
	100%	{visibility: hidden; transform: scale(0);}
}
@-webkit-keyframes inactivePanelContentScale {
	0%		{visibility: visible; -webkit-transform: scale(1);}
	50%		{visibility: visible; -webkit-transform: scale(0);}
	100%	{visibility: hidden; -webkit-transform: scale(0);}
}
@-moz-keyframes inactivePanelContentScale {
	0%		{visibility: visible; -moz-transform: scale(1);}
	50%		{visibility: visible; -moz-transform: scale(0);}
	100%	{visibility: hidden; -moz-transform: scale(0);}
}


/* ===== Demo Styling ===== */



::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: 0; }
a:hover, a:active { outline: 0; }

html{overflow-y:scroll;}
body{font-family: 'Open Sans', sans-serif; font-weight: 400; color: #677279;}

h1, h2, h3, h4, h5, h6{
  margin: 0 0 0 0;
  padding: 0;
  font-weight: 400;
}

h1{font-size: 1.7em; color: #b73d61; font-weight: 600;}
h2{font-size: 1.48em; color: #2b8aa4;}
h3{font-size: 1.36em; color: #2b8aa4;}
h4{font-size: 1.24em; color: #2b8aa4;}
h5{font-size: 1.12em; color: #2b8aa4;}
h6{color:#2b8aa4;}
p{}
a, a:visited{color: #b73d61; text-decoration: none;}
a:hover{color: #2b8aa4;}

.animator{
	float: right;
	margin: 0 0 10px 10px;
	padding: 5px 10px 5px 10px;
	border: #D7D7D7 1px solid;
	background: #F5F5F5;
}

.animator ul{
	margin: 5px 0 5px 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

            
          
!
            
              //James Basoo's jQuery panels.
(function($){
  $.fn.jbPanels = function(options) {


      //On Load
			var sectionWrap = $(this).attr('id'); //Get wrapper id
			var sectionWrapID = '#'+sectionWrap; //Add # to wrapper id
			var sectionWrapHeight = $(this).find('.panelNav').css('height'); //Find panelNav height

			$(sectionWrapID).find('.panelNav a').each( function () { //Find all tab links
				$(this).addClass('active'); //Activate all tab buttons to get width
				$(this).width($(this).width()); //Give a the width of the a and Add 14 to cater for FF & IE8
				$(this).removeClass('active'); //Deactivate all tab buttons

				var aHeight = parseInt($(this).css('height'));//Calculate height and add padding to vertically center text
				var aPadding = parseInt(sectionWrapHeight)-(aHeight)+2;
				var aPaddingHalf = parseInt(aPadding)/2;
				$(this).css('padding-top',aPaddingHalf)
				$(this).css('padding-bottom',aPaddingHalf)
			 });

			$(sectionWrapID).find('.panelNav a:first').addClass('active'); //Activate first tab button

			$(sectionWrapID).find('.panelContent :first').addClass('active'); //Activate first tab content

			var activeContentHeight = $(sectionWrapID).find('.panelContent :first').css('height'); //Get first tab content height
			$(sectionWrapID).find('.panelContent').css('height',activeContentHeight); //Apply first tab content height to wrapper

			//On Click
			$(sectionWrapID).find('.panelNav a[href*="#"]').click(function(){

				$(sectionWrapID).find('.panelNav .active').addClass('inactive'); //Add inactive to any tab buttons that were active
				$(sectionWrapID).find('.panelNav .active').removeClass('active'); //Remove active to any tab buttons that were active

				$(this).addClass('active'); //Add active class to this tab button
				$(this).removeClass('inactive'); //Remove inactive class from this tab button

				$(sectionWrapID).find('.panelContent .active').addClass('inactive'); //Add inactive to any tab content that was active
				$(sectionWrapID).find('.panelContent .active').removeClass('active'); //Remove active from any tab content that was active

				var activeContent = $(this).attr('href'); //Turn clicked href into variable
				$(activeContent).removeClass('inactive'); //Find corresponding tab content and remove inactive class
				$(activeContent).addClass('active'); //Find corresponding tab content and add active class

				var activeContentHeight = $(activeContent).css('height'); //Get active tab content height
				$(sectionWrapID).find('.panelContent').css('height',activeContentHeight); //Apply active tab content height to wrapper

				return false;
			});



		return this.each(function() {

		});

	};
})(jQuery);

//Warp 9 Mr Data, Engage.
	$().ready(function() {
		$('#jbPanels').jbPanels();
	});

//Demo animation switcher
	$('.animator a').click(function(){
		$('section[data-panelContent-animation]').attr('data-panelContent-animation',$(this).attr('data-animation-type'))
		$('.panelContent .inactive').removeClass('inactive');
		return false;
	});


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console