Bootstrap Collapse: только одна панель за раз (возможно, проблема с библиотекой jQuery)

Question

Я пытаюсь внедрить разборные панели Bootstrap на моем веб-сайте, но что-то не работает должным образом. Я намерен изменить вкладки WooCommerce по умолчанию на сворачивающиеся панели/аккордеоны. Вот код, который я использовал, чтобы переопределить файл tabs.php WooCommerce в:

<?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, поскольку она не включена нигде в этот момент. Я пробовал использовать как <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>, так и <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>, но безрезультатно.

Fiddle: link (обратите внимание: я удалил код PHP и вставил какой-то фиктивный текст для заголовка и содержимого панели. В моем случае у меня будет всего 2 панели, а не 3).

Любые советы?

Update: Вот выводимый HTML: https://jsfiddle.net/e2vc545g/ (я не могу добавить весь HTML-код веб-страницы, как она превышает 3000 символов)

Answer 1

Были ряд вопросов с разметке на основе скрипку вы публикуемую.

1. вы были вложены теги сценария
2. несколько элементов с одинаковым идентификатором
3. недействительным самозагрузки разметки

Я отправил скрипку here решение этих вопросов

Любые дополнительные вопросы должны быть помещены в новом вопросе НЕ продолжайте их здесь.

Изменения, реализованные здесь, должны загнан в РНР страницу

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