Bootstrap Collapse：一次只有一个面板（可能是jQuery库问题）

Question

I am trying to implement Bootstrap collapsible panels on my website, but something isn't working properly. My intention is to change the default WooCommerce tabs to collapsing panels/accordions. Here is the code I used to override WooCommerce's tabs.php file:

<?php
/**
* Single Product tabs
*
* @author WooThemes
* @package WooCommerce/Templates
* @version 2.0.0
*/

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}

/**
* 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="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

  <?php foreach ( $tabs as $key => $tab ) : ?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab">
      <h4 class="panel-title">
        <a data-toggle="collapse" role="button" data-parent="#accordion" href="#collapse-<?php echo $key ?>" class="collapsed">
          <?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', $tab['title'], $key ) ?>
        </a>
      </h4>
    </div>
    <div id="collapse-<?php echo $key ?>" class="panel-collapse collapse">
      <div class="panel-body">
        <?php call_user_func( $tab['callback'], $key, $tab ) ?>
      </div>
    </div>
  </div>

  <?php endforeach; ?>

</div>

<?php 
endif;
?>
</div><!-- .summary -->

The panels are working well, the only exception being that I cannot have just one panel open at a time. If I try toggling a second panel, the others don't collapse as they should. I have successfully implemented the panels before, but now something clearly is off.

I suspect it might be related to the jQuery library as it is not included anywhere at this point. I tried using both <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> and <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script> but to no avail.

Fiddle: link (please note: I have removed the PHP code and inserted some dummy text for the panel title and content. In my case, I will have just 2 panels, not 3).

Any advice?

Update: Here's the outputted HTML: https://jsfiddle.net/e2vc545g/ (I cannot add the entire HTML code of the webpage as it exceeds 3,000 characters)

Answer 1

There were a number of issues with your markup based on the fiddle you posted.

1. you had nested script tags
2. multiple elements with the same ID
3. invalid bootstrap markup

I posted a fiddle here resolving those issues

Any additional questions should be placed in a new question DO NOT continue them here.

The changes implemented here will have to backed into your php page

HTML

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-description" aria-expanded="true" aria-controls="collapse-description">Description</a>
      </h4>
    </div>
    <div id="collapse-description" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <h2>Product Description</h2>
        <p>description</p>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-additional_information" aria-expanded="true" aria-controls="collapse-additional_information">
          Additional Information        </a>
      </h4>
    </div>
    <div id="collapse-additional_information" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">

        <h2>Additional Information</h2>

        <table class="shop_attributes">
          <tr class="">
            <th>Colour</th>
            <td>
              <p>Pink, Golden, Silver</p>
            </td>
          </tr>
          <tr class="alt">
            <th>Size</th>
            <td>
              <p>UK 10, UK 12, UK 14, UK 8</p>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
</div>
<!-- .summary -->