Skip to content

Instantly share code, notes, and snippets.

@farfanoide

farfanoide/index.html

Created July 30, 2017 06:30
Show Gist options
  • Save farfanoide/4e74891e4ee9df3f0bea3c247f405b07 to your computer and use it in GitHub Desktop.
Save farfanoide/4e74891e4ee9df3f0bea3c247f405b07 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>REALLY FUCKING SIMPLE Tabs</title>
<script src="http://localhost:8080/static/bower_components/jquery/dist/jquery.min.js"></script>
<style type="text/css" media="screen">
.hidden { display: none ;}
</style>
</head>
<body>
<script>
$(document).ready(function () {
var TABS_CONTAINER_SELECTOR = '[data-tabs-container]',
TABS_TOGGLE_TRIGGER_SELECTOR = '[data-tab-toggle-trigger]',
TABS_CONTENT_SELECTOR = '[data-tab-content]';
$(TABS_TOGGLE_TRIGGER_SELECTOR).on('click', function (event) {
event.preventDefault();
var $container = $(this).closest(TABS_CONTAINER_SELECTOR),
$allTabs = $(TABS_CONTENT_SELECTOR, $container),
targetTabSelector = $(this).data('tab-target'),
$targetTab = $(targetTabSelector, $container),
wasHidden = $targetTab.hasClass('hidden');
// console.log($container)
// console.log(wasHidden)
console.log($targetTab)
// console.log($allTabs)
// hide all other tabs
$allTabs.addClass('hidden');
// Toggle selected tab
$targetTab.toggleClass('hidden', !wasHidden);
});
});
</script>
Usage Example:
<div data-tabs-container>
<!-- tab links -->
<button data-tab-toggle-trigger data-tab-target="#target-element-id">
Toggle #target-element-id
</button>
<button data-tab-toggle-trigger data-tab-target="#another-target-element-id">
Toggle #another-target-element-id
</button>
<!-- tabs content below -->
<div class="hidden"
data-tab-content
id="target-element-id">
#target-element-id content
</div>
<div class="hidden"
data-tab-content
id="another-target-element-id">
#another-target-element-id content
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment