Fix tabs not initializing and not showing/hiding properly

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index aed68afbc1bc1b9c98e518685f230bf8fb93211d..c7c3b193481d1e979e8cbf21c07d728d2420cf09 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -48,7 +48,7 @@ export default class Tabs {
           $link = $elem.find('a'),
           isActive = $elem.hasClass('is-active'),
           hash = $link[0].hash.slice(1),
-          linkId = $link[0].id ? $link[0].id : `hash${-label}`,
+          linkId = $link[0].id ? $link[0].id : `${hash}-label`,
           $tabContent = $(`#${hash}`);
 
       $elem.attr({'role': 'presentation'});
@@ -176,15 +176,13 @@ export default class Tabs {
     var $tabLink = $target.find('[role="tab"]'),
         hash = $tabLink[0].hash,
         $targetContent = this.$tabContent.find(hash),
-        $oldTab = this.$element.find(`.${this.options.linkClass}.is-active`);
+        $oldTab = this.$element.
+          find(`.${this.options.linkClass}.is-active`)
+          .removeClass('is-active')
+          .find('[role="tab"]')
+          .attr({ 'aria-selected': 'false' });
 
-    $oldTab
-      .removeClass('is-active')
-      .find('[role="tab"]')
-        .attr({ 'aria-selected': 'false' })
-        .attr('aria-controls');
-
-    $(`#${$oldTab}`)
+    $(`#${$oldTab.attr('aria-controls')}`)
       .removeClass('is-active')
       .attr({ 'aria-hidden': 'true' });