diff --git a/tabs/tabs.css b/tabs/tabs.css
new file mode 100644
index 00000000..6b6167d3
--- /dev/null
+++ b/tabs/tabs.css
@@ -0,0 +1,72 @@
+.tab-page {
+ display: none;
+}
+
+.active-page {
+ display: block;
+}
+
+body {
+ margin: 0;
+ background: #E5E5E5;
+ color: #404040;
+}
+
+.toolbar {
+ background: #03A9F4
+}
+
+.tabs {
+ list-style: none;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+ margin-left: 16px;
+}
+
+.tabs li {
+ float: left;
+ display: inline;
+}
+
+.tabs a {
+ position: relative;
+ color: white;
+ text-decoration: none;
+ text-transform: uppercase;
+ display: block;
+ width: 100px;
+ height: 50px;
+ text-align: center;
+ line-height: 52px;
+ font-weight: 700;
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.6);
+ overflow: hidden;
+}
+
+.tabs .active a {
+ color: white;
+}
+
+.tabs .active a:after {
+ height: 2px;
+ width: 100%;
+ display: block;
+ content: " ";
+ bottom: 0px;
+ left: 0px;
+ position: absolute;
+ background: #FFFF8D;
+ -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
+ -moz-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
+ transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
+}
+
+
+.tab-page {
+ box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
+ padding-top: 50px;
+ padding-left: 50px;
+ overflow: hidden;
+}
diff --git a/tabs/tabs.html b/tabs/tabs.html
new file mode 100644
index 00000000..28b90b15
--- /dev/null
+++ b/tabs/tabs.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ I am the first tab
+
+
+
+ I am the second tab
+
+
+
+ I am the third tab
+
+
+
+
+
diff --git a/tabs/tabs.js b/tabs/tabs.js
new file mode 100644
index 00000000..f48e2c72
--- /dev/null
+++ b/tabs/tabs.js
@@ -0,0 +1,40 @@
+var MaterialTabs = function (elem) {
+ //get tab objects and store as pane + tab
+ var activeTabObject;
+
+ var TabObject = function () {
+ var self = this;
+ this.tab; //element
+ this.pane; //element
+ this.setClick = function () {
+ self.tab.addEventListener('click', self.showThisTab)
+ };
+
+ this.showThisTab = function () {
+ if (self !== activeTabObject) {
+ //change the tab page and update the active tab
+ activeTabObject.pane.className = activeTabObject.pane.className.replace('active-page', '');
+ activeTabObject.tab.className = activeTabObject.tab.className.replace('active', '');
+ self.pane.className = self.pane.className + ' active-page';
+ self.tab.className = self.tab.className + ' active';
+ activeTabObject = self;
+ }
+ };
+ };
+
+ var ul = elem;
+ var i;
+ var items = ul.getElementsByTagName("li");
+ for (i = 0; i < items.length; ++i) {
+ var tab = new TabObject();
+ tab.tab = items[i];
+ var classString = items[i].className;
+ var className = classString.split(' ')[0];
+ tab.pane = document.getElementById(className);
+ tab.setClick();
+ if (classString.indexOf('active') > -1) {
+ activeTabObject = tab;
+ }
+ }
+
+};