Tabs to Accordion in Product description

[QuintasAD]

Hi,

 

I want to change tabs in "Product Description" to accordion or toggle, could you help me?

 

Best.

[shiyas]

You have to edit the product.tpl file with some jquery / css3 accordian elements

 

CSS3 Accordian - http://tympanus.net/Tutorials/CSS3Accordion/

 

Jquery Accordian - https://jqueryui.com/accordion/

[QuintasAD]

Thank you very much for your reply.

It´s easy with html code but I can´t do it in products.tpl, could you help me?

 

This is the code:

 

      <div id="tab-container">

        <!-- Nav tabs -->

        <ul id="product-tabs" class="nav nav-tabs" role="tablist">

            {if isset($product) && $product->description}

                <li class="active"><a href="#descripntion-tab" role="tab" data-toggle="tab">{l s='Product Description'}</a></li>{/if}

            {if isset($features) && $features}

                <li {if !isset($product->description)}class="active"{/if}><a href="#table-data-sheet" role="tab" data-toggle="tab">{l s='Additional Information'}</a></li>{/if}

            {if $HOOK_PRODUCT_TAB}

                {$HOOK_PRODUCT_TAB}

            {/if}

        </ul>

 

        <!-- Tab panes -->

        <div id="product-tab-content" class="tab-content">

          {if isset($product) && $product->description}

            <div class="tab-pane active fade in" id="descripntion-tab">

                {$product->description}

            </div>

 {/if}

          {if isset($features) && $features}

            <div class="tab-pane fade in" id="table-data-sheet">

<table class="table-data-sheet">

{foreach from=$features item=feature}

<tr class="{cycle values="odd,even"}">

{if isset($feature.value)}

<td>{$feature.name|escape:'html':'UTF-8'}</td>

<td>{$feature.value|escape:'html':'UTF-8'}</td>

{/if}

</tr>

{/foreach}

</table>

            </div>

        {/if}

          {if isset($HOOK_PRODUCT_TAB_CONTENT) && $HOOK_PRODUCT_TAB_CONTENT}

                {$HOOK_PRODUCT_TAB_CONTENT}

          {/if}

        </div>

  </div>

[designitwise]

have you had any luck with this please assist if you can i'm trying to achieve the same thing ?