Php 引导折叠：一次只有一个面板（可能是jQuery库问题）

我试图在我的网站上实现可折叠的引导面板，但有些东西不能正常工作。我的目的是将默认选项卡更改为折叠面板/手风琴。下面是我用来覆盖WooCommerce的tabs.php文件的代码：

<?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 -->

面板工作正常，唯一的例外是我不能一次只打开一个面板。如果我尝试切换第二个面板，其他面板不会像它们应该的那样崩溃。我以前已经成功地实现了这些面板，但现在显然有些问题没有解决

我怀疑它可能与jQuery库有关，因为目前它还没有包含在任何地方。我试着同时使用和，但没有用

Fiddle：请注意：我已经删除了PHP代码，并为面板标题和内容插入了一些虚拟文本。在我的例子中，我将只有2个面板，而不是3个

有什么建议吗

---

更新：这是输出的HTML：我无法添加网页的整个HTML代码，因为它超过3000个字符

根据您发布的fiddle，您的标记存在许多问题

您有嵌套的脚本标记 具有相同ID的多个元素 无效的引导标记 我贴了一张解决这些问题的小册子

任何附加问题都应放在新问题中，请勿在此继续

这里实现的更改必须备份到php页面中

HTML

---

需要Jquery库才能完全启动function@happymacarts根据我原来的帖子，我尝试了几种方法，但都没有成功。对我应该包含在header.php中的代码有什么建议吗？谢谢您确定jQuery没有加载吗？从您的控制台尝试此$.fn.jquery。您也可以尝试下载jquery lib的副本，并将其放在您的脚本或js文件夹中的本地服务器上。您的fiddle出现了一些标记问题。我复制了版本，对其进行了修改并粘贴了。我认为这符合您的意图。您可以将该页面的呈现php粘贴到此处，以便我们可以看到它的情况吗？我无法粘贴该页面由于字符限制，请将整个代码添加到新答案中，或将其添加到原始问题中。这是小提琴：那么问题出在哪里？好吧，不知怎么的，它现在起作用了。我在代码中添加了这一点：但运行并不平稳。它不能顺利切换。这场运动似乎不知怎么被打乱了。不知道为什么？快乐车，我自己解决了跳跃效应。我使用以下样式向折叠面板添加了一个额外的细节类：溢出：隐藏；明确：两者皆有；并且还将.collasing类的过渡调整为0.3s高度。现在过渡是平滑的。我已把你的答案标为解决办法。谢谢你的帮助！

<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 -->