Zurb foundation for sites v6 tabs not working

Question

I am using Zurb foundation for sites v6 in my project. I am having a page with tabs where I create tabs and tabs content dynamically.

<div class="row woocommerce-tabs">
    <div class="large-12 columns">
        <ul class="tabs" data-tabs id="product-description-tabs">
            <?php foreach ( $tabs as $key => $tab ) : ?>
                <li class="tabs-title">
                    <a href="#tab-<?php echo esc_attr( $key ); ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></a>
                </li>
            <?php endforeach; ?>
        </ul>
      <div class="tabs-content" data-tabs-content="product-description-tabs">
            <?php foreach ( $tabs as $key => $tab ) : ?>
                <div class="tabs-panel" id="tab-<?php echo esc_attr( $key ); ?>">
                    <?php call_user_func( $tab['callback'], $key, $tab ); ?>
                </div>
            <?php endforeach; ?>
      </div>
   </div>
</div>

I am initiating foundation like so:

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

But the problem is that when tabs are created and I want to open some tab, when I have for example two tabs, it just adds the content from the newly opened second tab to the first tab's content. There are no errors in the console, and I am not sure why is it doing that? I am using also foundation off-canvas on the same page and that works completely fine, it is just the tabs that are not working as expected.

Answer 1

I'd guess (I'm not that hot on PHP) that as the tab content is being added dynamically, $(document).foundation(); is running before the tabs themselves have been created (as it will run when the page is first loaded). If my assumption is correct then you can either:

Reinitialise (if you are updating an existing set of tabs with new content):

Foundation.reInit('tabs'); // generally for all .tabs

OR

Foundation.reInit($('#product-description-tabs')); // for that one id

Initialise after creation (If this is a new set of tabs)

$('[data-tabs]').foundation(); // Initialise all tabs

OR

$('#product-description-tabs').foundation(); // Initialise this set of tabs

But this must be executed once you have loaded the tabs HTML into the DOM, or it won't actually do anything.