Cleaned up tabs JS and fixed conflicts with bootstrap

Fixes #8000

assets/js/frontend/single-product.js

@@ -6,36 +6,36 @@ jQuery( function( $ ) {
 	}
 
 	// Tabs
-	$( '.woocommerce-tabs .panel' ).hide();
-
-	$( '.woocommerce-tabs ul.tabs li a' ).click( function() {
-
-		var $tab = $( this ),
-			$tabs_wrapper = $tab.closest( '.woocommerce-tabs' );
-
-		$( 'ul.tabs li', $tabs_wrapper ).removeClass( 'active' );
-		$( 'div.panel', $tabs_wrapper ).hide();
-		$( 'div' + $tab.attr( 'href' ), $tabs_wrapper).show();
-		$tab.parent().addClass( 'active' );
-
-		return false;
-	});
-
-	$( '.woocommerce-tabs' ).each( function() {
-		var hash	= window.location.hash,
-			url		= window.location.href,
-			tabs	= $( this );
+	$('.wc-tabs-wrapper, .woocommerce-tabs')
+		.on( 'init', function() {
+			$('.wc-tab, .panel:not(.panel .panel)').hide();
+
+			var hash  = window.location.hash;
+			var url   = window.location.href;
+			var $tabs = $( this ).find('.wc-tabs, ul.tabs').first();
+
+			if ( hash.toLowerCase().indexOf( "comment-" ) >= 0 || hash == '#reviews' ) {
+				$tabs.find('li.reviews_tab a').click();
+			} else if ( url.indexOf( "comment-page-" ) > 0 || url.indexOf( "cpage=" ) > 0 ) {
+				$tabs.find('li.reviews_tab a').click();
+			} else {
+				$tabs.find('li:first a').click();
+			}
+		})
+		.on( 'click', '.wc-tabs li a, ul.tabs li a', function() {
+			var $tab          = $( this );
+			var $tabs_wrapper = $tab.closest( '.wc-tabs-wrapper, .woocommerce-tabs' );
+			var $tabs         = $tabs_wrapper.find( '.wc-tabs, ul.tabs' );
 
-		if ( hash.toLowerCase().indexOf( "comment-" ) >= 0 || hash == '#reviews' ) {
-			$('ul.tabs li.reviews_tab a', tabs ).click();
+			$tabs.find('li').removeClass( 'active' );
+			$tabs_wrapper.find('.wc-tab, .panel:not(.panel .panel)').hide();
 
-		} else if ( url.indexOf( "comment-page-" ) > 0 || url.indexOf( "cpage=" ) > 0 ) {
-			$( 'ul.tabs li.reviews_tab a', $( this ) ).click();
+			$tab.closest('li').addClass( 'active' );
+			$tabs_wrapper.find( $tab.attr( 'href' ) ).show();
 
-		} else {
-			$( 'ul.tabs li:first a', tabs ).click();
-		}
-	});
+			return false;
+		})
+		.trigger('init');
 
 	$( 'a.woocommerce-review-link' ).click( function() {
 		$( '.reviews_tab a' ).click();

templates/single-product/tabs/tabs.php

@@ -8,7 +8,7 @@
  */
 
 if ( ! defined( 'ABSPATH' ) ) {
-	exit; // Exit if accessed directly
+	exit;
 }
 
 /**
@@ -21,22 +21,18 @@
 
 if ( ! empty( $tabs ) ) : ?>
 
-	<div class="woocommerce-tabs">
-		<ul class="tabs">
+	<div class="woocommerce-tabs wc-tabs-wrapper">
+		<ul class="tabs wc-tabs">
 			<?php foreach ( $tabs as $key => $tab ) : ?>
-
 				<li class="<?php echo $key ?>_tab">
 					<a href="#tab-<?php echo $key ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', $tab['title'], $key ) ?></a>
 				</li>
-
 			<?php endforeach; ?>
 		</ul>
 		<?php foreach ( $tabs as $key => $tab ) : ?>
-
-			<div class="panel entry-content" id="tab-<?php echo $key ?>">
+			<div class="panel entry-content wc-tab" id="tab-<?php echo $key ?>">
 				<?php call_user_func( $tab['callback'], $key, $tab ) ?>
 			</div>
-
 		<?php endforeach; ?>
 	</div>