Skip to content

Instantly share code, notes, and snippets.

@colegeissinger
Last active December 12, 2015 07:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save colegeissinger/4741029 to your computer and use it in GitHub Desktop.
Save colegeissinger/4741029 to your computer and use it in GitHub Desktop.
A response to @whyisjake about simplify some JavaScript in a Gist found here https://gist.github.com/whyisjake/4736577. View this on Codepen http://codepen.io/colegeissinger/pen/qdvGB
jQuery(document).ready(function(){
jQuery('#tabs li').click(function() {
id = $(this).attr('id');
//alert(id);
$('#steps div#js-' + id).slideDown();
$('#steps div:not(#js-' + id + ')').slideUp();
});
});
<div class="wrap">
<ul id="tabs">
<li id="step-1">Step 1</li>
<li id="step-2">Step 2</li>
<li id="step-3">Step 3</li>
<li id="step-4">Step 4</li>
<li id="step-5">Step 5</li>
</ul>
<div id="steps">
<div id="js-step-1" class="step">
<h1>Step 1</h1>
</div><!--[END .step]-->
<div id="js-step-2" class="step">
<h1>Step 2</h1>
</div><!--[END .step]-->
</div><!--[END #steps]-->
</div><!--[END .wrap]-->
#tabs { list-style:none; padding:0; margin:0; }
#tabs li { display:inline-block; margin-right:10px; border:1px solid #ccc; border-bottom:none; padding:.5em; border-radius:5px 5px 0 0; background:#eee; cursor:pointer; }
#tabs li:hover { background:#ccc; }
.step { border:1px solid #ccc; border-bottom:none; padding:0 10px; }
.step:last-child { border-bottom:1px solid #ccc; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment