Different states for Woocommerce product tabs

Question

I recently got tasked with maintaining an old WP site and are having some trouble figuring out how to set the state on a duplicate element. The site uses WooCommerce plugin and in it there are templates which are overridden. One of the templates is called tabs and are essentially a togglable table with additional product information .In this particular app, each product has two tabs. Now the problem is when you click on a tab to open it, its icon changes from a '+' to a '-'. When you do this, the icon on both tabs toggle at the same time. So even though only one tab is opened the other closed tab has a '-'. Sadly, I have never worked with Wordpress or PHP at all, so this is all very archaic for me. This is the template:

<?php
/**
 * Single Product tabs
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/tabs/tabs.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 2.4.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Filter tabs and allow third parties to add their own.
 *
 * Each tab is an array containing title, callback and priority.
 * @see woocommerce_default_product_tabs()
 */
$tabs = apply_filters( 'woocommerce_product_tabs', array() );

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

    <div class="woocommerce-tabs wc-tabs-wrapper container">
        <div class="accordion" role="tablist" id="product-accordion">
            <div class="accordion-item">
                <?php foreach ( $tabs as $key => $tab ) : ?>
                    <div class="border-bottom border-dark pb-1 pt-3 my-4 <?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
                        <a class="h5 text-uppercase" data-toggle="collapse"  href="#collapse-<?php echo esc_attr( $key ); ?>">
                            <?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?>

                            <span class="handle float-right handle--collapsed"><i class="icon icon-plus"></i></span>
                            <span class="handle float-right handle--open"><i class="icon icon-minus"></i></span>    
                        </a>
                    </div>
                    <div class="collapse" id="collapse-<?php echo esc_attr( $key ); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr( $key ); ?>" data-parent="#product-accordion">
                        <?php if ( isset( $tab['callback'] ) ) { call_user_func( $tab['callback'], $key, $tab ); } ?>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>

<?php endif; ?>

Answer 1

Try Using following code

<?php
/**
 * Single Product tabs
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/tabs/tabs.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 2.4.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Filter tabs and allow third parties to add their own.
 *
 * Each tab is an array containing title, callback and priority.
 * @see woocommerce_default_product_tabs()
 */
$tabs = apply_filters( 'woocommerce_product_tabs', array() );

if ( ! empty( $tabs ) ) : ?>
    <div class="woocommerce-tabs wc-tabs-wrapper container">
        <div class="accordion" role="tablist" id="product-accordion">
            <div class="accordion-item">
                <?php $i = 1; ?>
                <?php foreach ( $tabs as $key => $tab ) : ?>

                    <?php 
                    if($i==1){
                        $collapsein=' in';
                        $icon = 'glyphicon-minus';
                    }else{
                        $collapsein=' ';
                        $icon = 'glyphicon-plus';
                    } 

                    ?>
                    <div class="show bs">
                        <div class="panel-heading border-bottom border-dark pb-1 pt-3 my-4  <?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
                            <h4 class="panel-title">
                                <a class="h5 text-uppercase" data-toggle="collapse"  href="#collapse-<?php echo esc_attr( $key ); ?>">
                                    <span class="glyphicon <?php echo $icon; ?>"></span>

                                    <?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?>


                                </a>
                            </h4>
                        </div>

                        <div class="collapse <?php echo $collapsein; ?>" id="collapse-<?php echo esc_attr( $key ); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr( $key ); ?>" data-parent="#product-accordion">
                            <?php if ( isset( $tab['callback'] ) ) { call_user_func( $tab['callback'], $key, $tab ); } ?>
                        </div>
                    </div>
                <?php 
            $i++;
            endforeach;

             ?>
            </div>
        </div>
    </div>
<script>
    jQuery(document).ready(function(){
        // Toggle plus minus icon on show hide of collapse element
        jQuery(".collapse").on('show.bs.collapse', function(){
            jQuery(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hide.bs.collapse', function(){
            jQuery(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
    });
</script>
<?php endif; ?>