Fixes #9678 - Match height tabs bug

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index 907bf532387448baa9e45b089c375516aef2c046..fb422de77aa2de12a14c21a5e6319bbf4fdfb851 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -318,18 +318,22 @@ class Tabs {
    * Sets the height of each panel to the height of the tallest panel.
    * If enabled in options, gets called on media query change.
    * If loading content via external source, can be called directly or with _reflow.
+   * If enabled with `data-match-height="true"`, tabs sets to equal height
    * @function
    * @private
    */
   _setHeight() {
-    var max = 0;
+    var max = 0,
+        _this = this; // Lock down the `this` value for the root tabs object
+
     this.$tabContent
-      .find(`.${this.options.panelClass}`)
+      .find(`.${_this.options.panelClass}`) // get the options from the parent instead of trying to get them from the child
       .css('height', '')
       .each(function() {
-        var panel = $(this),
-            isActive = panel.hasClass(`${this.options.panelActiveClass}`);
 
+        var panel = $(this),
+            isActive = panel.hasClass(`${_this.options.panelActiveClass}`); // get the options from the parent instead of trying to get them from the child
+            
         if (!isActive) {
           panel.css({'visibility': 'hidden', 'display': 'block'});
         }