Separating data into Tabs in Toolset Views

Toolset_View_as_Tabs.note

// This is how you can separate your view pulls into tab for better layouts.
// Note, you will need to have something to query against for the data seperation.
// Use Case: WooCommerce Products in Tabs
// You will need 3 Views to accomplish this. We open the tabs the first view and close the tabs in the second view. We add the second view into the first on the outside of the loop (since it contains it's own loop). Then nest a view in there for final data. See the example below.

// 1. Add the jQuery UI Tabs to WordPress
// Add this to specific pages using a Beaver Builder Themer part

<script type="text/javascript">
jQuery(function( $ ) {
 $('#tabs').tabs();
});
</script>

// 2. Add this to the first view to get your tab listing

<!-- wpv-loop-start -->
	<div id="tabs">
      <ul>
		<wpv-loop>
          <li><h4><a href="#tab[wpv-loop-index offset='-1']">[wpv-taxonomy-title]</a></h4></li>
          </li>
		</wpv-loop>
       </ul>
	[wpv-view name="tab-list-content"] // Second View inserted
	<!-- wpv-loop-end -->
 
 // 3. Add this to the second view, getting the same results as above but changing the structure to be the body of the tabs and the content, which is a view that pulls in the data for each tab
 
<!-- wpv-loop-start -->
	<wpv-loop>
      <div id="tab[wpv-loop-index offset='-1']">
        <div>[wpv-view name="tab-listing-products" wpvpatab="[wpv-taxonomy-slug]"]</div> // Third View inserted
      </div>
	</wpv-loop>
</div>
	<!-- wpv-loop-end -->
 
// 4. This is the third view that will output the actual tab data

<!-- wpv-loop-start -->
	<ul class="wpv-loop js-wpv-loop tab-loop"> // added a class
		<wpv-loop>
			<li>
              <div class="prod-model">[wpv-post-field name='_sku']</div>
              <div class="prod-description">
                <div class="prod-cat">[wpv-post-taxonomy type="product_cat" format="name"]</div>
                <div class="prod-title">[wpv-post-title]</div>
              </div>
              <div class="prod-qty-in">[types field='qty-in-package'][/types]</div>
              <div class="prod-price">[wpv-woo-product-price]</div>
              <div class="prod-cart">[add_to_cart id="[wpv-post-id]"]</div>
			</li>
		</wpv-loop>
	</ul>
	<!-- wpv-loop-end -->