Woocommerce折りたたみ式チェックアウトフォーム

Question

WooCommerce折りたたみ式チェックアウトフォームを正しく機能させるのにトラブルが発生しています。私はこのためにブートストラップ折りたたみを使用していて、ここに私の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"ファイルでした。私は自分のfunctions.phpに

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'); 

で

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'); 

を交換し、現在取り組んでいます。ただし、パネルが崩壊すると、<div class="panel body"></div>の内容が親をオーバーフローします（<div class="panel-collapse collapse"></div>）。また、折りたたみ動作はあまり「滑らか」ではありません。それは跳ね上がります。

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

私はそれは同様の問題を誰にも役立ちます願っています：私はそれを動作させるために、次のスタイルでpanel-collapse collapseのdivに余分detailsクラスを追加する必要がありました！