Menu icon Foundation
Tabs new instance JS errors

Hello.

When I attempt to create a new instance of Tabs I get a JavaScript error on a page that does not contain the Tabs component markup.

When I use the following code to create Tabs everything works as expected on the page with the tabs component markup:

let $tabsElement = $('.js-tabs');

  // TODO: this causing js error - Uncaught TypeError: Cannot read property 'id' of undefined
  // Create new instance of tabs
  let tabsOptions = {
    activeCollapse: true,
    linkClass: 'c-tabs__title',
    panelClass: 'c-tabs__panel',
    deepLink: true,
    deepLinkSmudge: true
  };

  let $tabs = new Foundation.Tabs($tabsElement, tabsOptions); // eslint-disable-line no-unused-vars

However, when I navigate to a page which does not contain the tabs component markup I get the following JS errors in the browser console:

Uncaught TypeError: Cannot read property 'id' of undefined
    at Tabs._init (app.jquery.js?t=1512366823228:4841)
    at Tabs._setup (app.jquery.js?t=1512366823228:4814)
    at Tabs.Plugin (app.jquery.js?t=1512366823228:180)
    at new Tabs (app.jquery.js?t=1512366823228:4795)
    at app.jquery.js?t=1512366823228:15682
    at Object.<anonymous> (app.jquery.js?t=1512366823228:15683)
    at __webpack_require__ (app.jquery.js?t=1512366823228:25)
    at Object._typeof (app.jquery.js?t=1512366823228:15785)
    at __webpack_require__ (app.jquery.js?t=1512366823228:25)
    at Object.<anonymous> (app.jquery.js?t=1512366823228:16068)

tabsjs errorUncaught TypeError: Cannot read property 'id' of undefined

Hello.

When I attempt to create a new instance of Tabs I get a JavaScript error on a page that does not contain the Tabs component markup.

When I use the following code to create Tabs everything works as expected on the page with the tabs component markup:

let $tabsElement = $('.js-tabs');

  // TODO: this causing js error - Uncaught TypeError: Cannot read property 'id' of undefined
  // Create new instance of tabs
  let tabsOptions = {
    activeCollapse: true,
    linkClass: 'c-tabs__title',
    panelClass: 'c-tabs__panel',
    deepLink: true,
    deepLinkSmudge: true
  };

  let $tabs = new Foundation.Tabs($tabsElement, tabsOptions); // eslint-disable-line no-unused-vars

However, when I navigate to a page which does not contain the tabs component markup I get the following JS errors in the browser console:

Uncaught TypeError: Cannot read property 'id' of undefined
    at Tabs._init (app.jquery.js?t=1512366823228:4841)
    at Tabs._setup (app.jquery.js?t=1512366823228:4814)
    at Tabs.Plugin (app.jquery.js?t=1512366823228:180)
    at new Tabs (app.jquery.js?t=1512366823228:4795)
    at app.jquery.js?t=1512366823228:15682
    at Object.<anonymous> (app.jquery.js?t=1512366823228:15683)
    at __webpack_require__ (app.jquery.js?t=1512366823228:25)
    at Object._typeof (app.jquery.js?t=1512366823228:15785)
    at __webpack_require__ (app.jquery.js?t=1512366823228:25)
    at Object.<anonymous> (app.jquery.js?t=1512366823228:16068)