Skip to content

Instantly share code, notes, and snippets.

@corysimmons
Created August 14, 2014 15:23
Show Gist options
  • Save corysimmons/bc02e50d0c8cc3f5b06c to your computer and use it in GitHub Desktop.
Save corysimmons/bc02e50d0c8cc3f5b06c to your computer and use it in GitHub Desktop.
jQuery Tabs without 10k characters
<nav class="tabs-nav">
<button data-target-tab="tab-1">Area Code</button>
<button data-target-tab="tab-2">Location</button>
<button data-target-tab="tab-3">Toll Free</button>
</nav>
<div class="tab-content" data-tab="tab-1">
area code
</div>
<div class="tab-content" data-tab="tab-2">
location
</div>
<div class="tab-content" data-tab="tab-3">
toll free
</div>
$('.tabs-nav button').click(function() {
$('.tab-content').hide();
$('[data-tab="' + $(this).data('targetTab') + '"').show();
});
.tab-content
display: none
&:first-of-type
display: block
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment