Question

我想将Woocommerce选项卡制作为手风琴。 WooCommerce手风琴将帮助您轻松地将WooCommerce选项卡转换为响应式手风琴。我使用bootstrap 3制作了一个自定义主题。woocommerce选项卡的响应速度不是那么快，但是如果将其转换为响应选项卡（如将选项卡转换为手风琴），将会很棒。

任何人都可以帮我弄清楚..谢谢。

Codepen Here

<body class="woocommerce">
<div class="product">
<div id="accordion-container" class="woocommerce-tabs wc-tabs-wrapper">
<ul class="tabs wc-tabs" role="tablist">
                <li class="reviews_tab active" id="tab-title-reviews" role="tab" aria-controls="tab-reviews">
        <a href="#tab-reviews">Reviews (0)</a>
    </li>
                <li class="quick_contact_tab" id="tab-title-quick_contact" role="tab" aria-controls="tab-quick_contact">
        <a href="#tab-quick_contact">QUICK CONTACT</a>
    </li>
                <li class="vpm_guarantee_tab" id="tab-title-vpm_guarantee" role="tab" aria-controls="tab-vpm_guarantee">
        <a href="#tab-vpm_guarantee">GUARANTEE</a>
    </li>
</ul>
<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--reviews panel entry-content wc-tab" id="tab-reviews" role="tabpanel" aria-labelledby="tab-title-reviews" style="display: block;">
    <div id="reviews" class="woocommerce-Reviews">
            Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content 

        <div class="clear"></div>
    </div>
</div>
<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--quick_contact panel entry-content wc-tab" id="tab-quick_contact" role="tabpanel" aria-labelledby="tab-title-quick_contact" style="display: none;">

Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content 

<div class="clearfix seperator-20"></div>
</div>
<div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--vpm_guarantee panel entry-content wc-tab" id="tab-vpm_guarantee" role="tabpanel" aria-labelledby="tab-title-vpm_guarantee" style="display: none;">

Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content Tab Content 
</div>
</div>
</div>
</body>

Woocommerce从Tabs到Accordion

0 个答案: