Turn WooCommerce product tabs into accordions 2024

/*
 * Snippet: Turn WooCommerce product tabs into accordions 2024
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?824
 * Tested with WooCommerce 8.8.2
 * "Remove tabs and make new modified tabs"
*/
// removes default woocommerce tabs from single product page
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs' );

// add new modified tabs arranged as accordions	
add_action( 'woocommerce_after_single_product_summary', 'wcsuccess_custom_tab_template' );	
function wcsuccess_custom_tab_template() {
	$tabs = apply_filters( 'woocommerce_product_tabs', array() );

	if ( ! empty( $tabs ) ) : ?>

<div class="woocommerce-tabs wc-tabs-wrapper">
	<ul class="tabs wc-tabs resp-tabs-list" role="tablist">
		<?php 
	
	// set incremental value to use to check for the first tab which is active on page load	
	$i = 0;
	
	// loop through each tab.
	// Nest the tab content with the tab title
	foreach ( $tabs as $key => $tab ) : 
		?>
		<li class="<?php echo esc_attr( $key ); ?>_tab <?php
	if($i == 0) echo 'active-tab'; ?>" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
			<a href="#tab-<?php echo esc_attr( $key ); ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></a>
			<div class="tab-button <?php
	if($i == 0) echo 'clicked'; ?>"></div>
		</li>
		<div class="resp-tabs-container">

			<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--<?php echo esc_attr( $key ); ?> panel entry-content wc-tab <?php
	if($i == 0) echo 'active'; ?>" id="tab-<?php echo esc_attr( $key ); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr( $key ); ?>">
				<?php call_user_func( $tab['callback'], $key, $tab ); ?>
			</div>

		</div>
		<?php 
	$i++;
	endforeach; 
		?>
	</ul>

</div>

<?php endif;
}

/*
 * Snippet: Turn WooCommerce product tabs into accordions 2024
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?824
 * Tested with WooCommerce 8.8.2
 * "Add JS for accordian action"
*/
add_action('wp_footer', 'wc_success_accordion_script');
function wc_success_accordion_script(){
        // only load script on product pages
	if(is_product()){
	?>
<script type="text/javascript">
	(function($) {
	        // detect click on tab
		$(document).on('click', '.wc-tabs li', function(){
		        // get the name of the aria-controls which matches the id of the corresponding tab content
			let ClickedTab = $(this).attr('aria-controls');
			
			// get th emax scroll height of th ecorresponding tab
			let maxHeight = document.getElementById(ClickedTab).scrollHeight;

                        // toggle the active class on the tab
			$(this).toggleClass('active-tab');
			
			// toggle the active class on the tab content
			$('.wc-tab').toggleClass('active');
			
			// apply css and classes depending on the active-tab class
			if($(this).hasClass('active-tab')){
				$('#'+ClickedTab).css('max-height', maxHeight);
				$(this).find('.tab-button').addClass('clicked');
			} else {
				$('#'+ClickedTab).css('max-height', '0');
				$(this).find('.tab-button').removeClass("clicked");
			}
		});
	})( jQuery );
</script>
	<?php
	}
}

/*
 * Snippet: Turn WooCommerce product tabs into accordions 2024
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?824
 * Tested with WooCommerce 8.8.2
 * "Accordian CSS"
*/
.wc-tab {
	display:block !important;
}

.wc-tab {
	max-height:0;
	overflow:hidden;
	transition:.5s;
}

.wc-tab.active {
	transition:1s;
}



.wc-tabs li, .wc-tabs li a {
    width: 100%;
}



.tab-button {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #70975B;
    top: 6px;
    transform: rotate(0deg);
  border-radius: 50%;
  cursor: pointer;
  z-index: 100;
  transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
	right:0
}

.tab-button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 2px;
  width: 50%;
  background: white;
}

.tab-button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  width: 2px;
  background: white;
}

.tab-button.clicked {
  transform: rotate(360deg);
  background: #CC2A41;
}

.tab-button.clicked:before {
  width: 0;
}