Foundation-sites: Tabs examples not working (post 5.2.3)

[manwithacat]

Looking at the live Documentation for Tabs after 5.2.3, the change 0608559f97393c771ceff835589e4cc84f200f7e to the tabs component to remove the requirement for dd and dl structures seems to be having some problems.

Tabs using the old structures are still fine. The new tabs look like they are rendering correctly, but panel selection isn't working - lots of Uncaught TypeErrors in the console.

[And some missing font files as well: Proxima Nova?]

[hernanvicente]

Same problem here, I'm using the sass gem foundation-rails into a Rails 4.1 application. I noticed this odd behavior with 5.2.2.0, then I tried to solve this issue updating to 5.2.3.

I added to my Gemfile:
gem 'foundation-rails', git: '[email protected]:zurb/foundation-rails.git'

I ran: bundle update foundation_rails

My log bundler log says:
Using foundation-rails 5.2.3.0 (was 5.2.2.0) from [email protected]:zurb/foundation-rails.git (at master)

I tested the example code of the documentation:
http://foundation.zurb.com/docs/components/tabs.html

But finally after all the problem still persist.

[Weeblewonder]

I'm having issues with tabs not working for me. Using "foundation": "zurb/bower-foundation" in my bower.json, 5.2.2 was missing css and didnt work so upgraded to 5.2.3 css is fixed but tabs still dont work.

Using the example html from the docs, have tried foundation.js foundation.min.js and foundation.tab.js, both at top and bottom of the page. Not getting any console errors.

[manwithacat]

Looks like it's all fine now.

[numediaweb]

Trying to use the tabs snipet inside a a project but the js is not working; the tabs do nothing when clicked.
I included the necessary js files;

 'src/packages/foundation/js/vendor/jquery.js',
 'src/packages/foundation/js/vendor/fastclick.js',
 'src/packages/foundation/js/foundation.min.js',

Then calling it like;

console.log('hi js is loaded !');
$(document).foundation();
console.log(foundation());

But doesn't work. The console shows:

hi js is loaded !
Uncaught ReferenceError: foundation is not defined 

Does the tab depend on any other scripts other than the base? or other css classes to function?

[numediaweb]

Oh! silly me!
I forgot to include data-tab="" in the ul;

<ul class="tabs" data-tab="">

[Dhamu28]

I'm having same issue with top-bar toggle and tabs that not working. I have downloaded latest version of Zurb foundation 5.4.5 and added all necessary files like jquery.js, fastclick.js, foundation.js, foundation.topbar.js and css also foundation.css ......any idea??

[G-4]

Just add

<script>
  $(document).foundation();
</script>

[wairimu49]

Still doesnt work for me. I have foundation 5.4.7 and I can't get it to work with all the edits suggested above. Anyone with an idea of any other solution let me know kindly

[atanascu]

Any news on this issue?

[ghost]

Including the js of foundation after the html body will solve this issue.

[rathboma]

wow, I was struggling with broken tabs myself, and including the JS after the html body solved it. Thank you so much!

[omarwaleed]

@reggievaldez thanks... it's working... been panicking for a while now

[jleecbd]

I've moved the script tag to just before the body closing tag and no help. Even moved it after. JS is loading but no foundation JS seems to be working.

[justinewin]

1. Jquery script must come first before foundation
2. Initiate using $(document).foundation(); inside script tag
3. create new element for the tabs

This is for the Foundation 6+ :)

[Nozif]

Wrap the foundation init in JQuery doc ready.