Woocommerce Collapsible Checkout Form

Question

У меня возникли проблемы, из-за которых конструкция складной формы WooCommerce работает правильно. Я использую Bootstrap Collapse для этого, и вот мой HTML разметка:

<div class="panel-group" id="checkout-accordion"> 
    <div class="panel panel-default" id="panel-billing"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-billing">Delivery Address</a> </h4> 
    </div> 
    <div id="collapse-billing" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <div class="col2-set" id="customer_details"> 
      <div class="col-1"> 
       <?php 
    do_action('woocommerce_checkout_billing'); 
?> 
      </div> 

      <div class="col-2"> 
       <?php 
    do_action('woocommerce_checkout_shipping'); 
?> 
      </div> 
     </div> 
     <button id="next1" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery"> Next </button> 
     </div> 
    </div> 
    </div> 


    <div class="panel panel-default" id="panel-shipping"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery">Delivery Options</a> </h4> 
    </div> 
    <div id="collapse-delivery" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <?php 
if (WC()->cart->needs_shipping() && WC()->cart->show_shipping()): 
?> 

      <?php 
    do_action('woocommerce_review_order_before_shipping'); 
?> 

      <?php 
    wc_cart_totals_shipping_html(); 
?> 

      <?php 
    do_action('woocommerce_review_order_after_shipping'); 
?> 

     <?php 
endif; 
?> 
     <button id="next2" type="button" class="btn btn-success" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-payment"> Next </button> 
     </div> 
    </div> 
    </div> 
</div> 

Идея заключается в том, чтобы иметь гармошку с различными секциями. Первый раздел будет виден по умолчанию, но остальные по умолчанию не будут переключаться. Они будут отображаться как серые, как если бы они не редактировались и не выбирались. После заполнения первой части формы появится кнопка «Далее», которая переключит следующий раздел аккордеона (который по умолчанию скрыт). И так далее.

Однако, как только следующий раздел переключается, предыдущий должен свернуть, чего не происходит. Я хочу, чтобы только одна панель открывалась за раз. Что я делаю не так? Я проверил, и я уверен, что разметка правильная, поэтому я бы очень признателен за ввод/предложение.

Вот скрипка: https://jsfiddle.net/hdpgp9sf/ (интересно, фрагмент работает правильно здесь, но не на моем сайте).

Спасибо!

Answer 1

Проблема была в самом деле в файле "bootstrap.js". Я заменил

function wpbootstrap_scripts_with_jquery() 
{ 
    // Register the script like this for a theme: 
    wp_register_script('custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array('jquery')); 
// For either a plugin or a theme, you can then enqueue the script: 
    wp_enqueue_script('custom-script'); 
} 
add_action('wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery'); 

с

function xobamax_resources() { 
    wp_enqueue_script('bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true); 

} 
add_action('wp_enqueue_scripts', 'xobamax_resources'); 

в моей functions.php и работает в настоящее время. Однако, когда панели разрушаются, содержимое внутри <div class="panel body"></div> переполняет родительский элемент, <div class="panel-collapse collapse"></div>, а также свертывающее действие не очень «плавное». Это скачкообразно. Я должен был добавить дополнительный details класс к panel-collapse collapse DIV со следующим моделированием, чтобы заставить его работать:

.details { 
    overflow: hidden; 
    transition: all 0.3s; 
} 

Я надеюсь, что это помогает кто с подобной проблемой!