Woocommerce вкладки для аккордеона - PullRequest
Новая
       20

Woocommerce вкладки для аккордеона

0 голосов
/ 24 июня 2019

Я хочу сделать вкладки Woocommerce для Аккордеона.WooCommerce Accordions поможет вам легко конвертировать вкладки 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>
...