Accordion Product Tabs

[lpgz710]

i want my tabs to work like accordion when one div open the other one closes this is how my tabs work now can you help me?

 

 

<div class="tab-content">
<h3>{l s='Product Details' d='Shop.Theme.Catalog'}</h3>
<div class="title" data-target="#product-details" data-toggle="collapse" {if !$product.description}aria-expanded="true"{/if}>
<div class="navbar-toggler collapse-icons">
<div class="fa fa-plus add"></div>
<div class="fa fa-minus remove"></div>
</div>
</div>
<ul id="product-details" {if !$product.description} class="collapse in" aria-expanded="true" {else}class="collapse"{/if}>
{block name='product_details'}
 {include file='catalog/_partials/product-details.tpl'}
{/block}
</ul>
</div>
{if $product.attachments}
<div class="col-xs-12">
<h3>{l s='Attachments' d='Shop.Theme.Catalog'}</h3>
<div class="title" data-target="#attachments" data-toggle="collapse">
<div class="navbar-toggler collapse-icons">
<div class="fa fa-plus add"></div>
<div class="fa fa-minus remove"></div>
</div>
</div>
<ul id="attachments" class="collapse">
{block name='product_attachments'}
 {if $product.attachments}
  <div class="tab-pane fade in" id="attachments">
     <section class="product-attachments">
       <h3 class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</h3>
       {foreach from=$product.attachments item=attachment}
         <div class="attachment">
           <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4>
           <p>{$attachment.description}</p
           ><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">
             {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted})
           </a>
         </div>
       {/foreach}
     </section>
   </div>
 {/if}
{/block}
</ul>
</div>
{/if}
{foreach from=$product.extraContent item=extra key=extraKey}
<div class="col-xs-12">
<h3>{$extra.title}</h3>
<div class="title" data-target="#extra-{$extraKey}" data-toggle="collapse">
<div class="navbar-toggler collapse-icons">
<div class="fa fa-plus add"></div>
<div class="fa fa-minus remove"></div>
</div>
</div>
<ul id="extra-{$extraKey}" class="collapse">
{$extra.content nofilter}
</ul>
</div>
{/foreach}
</div>
    </div>
     {hook h='displayProductButtons' product=$product}
      </div>
    </div>

[Scully]

Dear lpgz710

 

• This is your third post with the same questions.
• In the first post I asked what you mean with accordion. I didn't understand the question. You never answered.
• It is not of much help posting lots of your code without the ability to see your front end. This code does only help if one could see your front end.

Good luck if anybody is still interested in helping out - I am no longer.