Accordion Product Tabs

[lpgz710]

i want to display product tabs in accordion can you help me?

 

this is my product.tpl file

 

{**
 * 2007-2017 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <[email protected]>
 * @copyright 2007-2017 PrestaShop SA
 * @license   http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file=$layout}

{block name='head_seo' prepend}
  <link rel="canonical" href="{$product.canonical_url}">
{/block}

{block name='head' append}
  <meta property="og:type" content="product">
  <meta property="og:url" content="{$urls.current_url}">
  <meta property="og:title" content="{$page.meta.title}">
  <meta property="og:site_name" content="{$shop.name}">
  <meta property="og:description" content="{$page.meta.description}">
  <meta property="og:image" content="{$product.cover.large.url}">
  <meta property="product:pretax_price:amount" content="{$product.price_tax_exc}">
  <meta property="product:pretax_price:currency" content="{$currency.iso_code}">
  <meta property="product:price:amount" content="{$product.price_amount}">
  <meta property="product:price:currency" content="{$currency.iso_code}">
  {if isset($product.weight) && ($product.weight != 0)}
  <meta property="product:weight:value" content="{$product.weight}">
  <meta property="product:weight:units" content="{$product.weight_unit}">
  {/if}
{/block}

{block name='content'}

  <section id="main" itemscope itemtype="https://schema.org/Product">
    <meta itemprop="url" content="{$product.url}">
<h2 style="display:none !important">.</h2>
    <div class="row">
      <div class="col-md-6">
        {block name='page_content_container'}
          <section class="page-content horizontal_mode" id="content">
            {block name='page_content'}
              {block name='product_flags'}
                {*<ul class="product-flags">
                  {foreach from=$product.flags item=flag}
                    <li class="product-flag {$flag.type}">{$flag.label}</li>
                  {/foreach}
                </ul>*}
                <div class="conditions-box">
                {if isset($product.show_condition) && $product.condition.type == "new" && $product.show_condition == 1  && isset($product.new) && $product.new == 1 }
                <span class="new_product">{l s='New'}</span>
                {/if}
                {if isset($product.on_sale) && $product.on_sale && isset($product.show_price) && $product.show_price }
                <span class="sale_product">{l s='Sale'}</span>
                {/if}
                </div>
              {/block}

              {block name='product_cover_tumbnails'}
                {include file='catalog/_partials/product-cover-thumbnails.tpl'}
              {/block}
            {/block}
          </section>
        {/block}
        </div>
        <div class="col-md-6">
          {block name='page_header_container'}
            {block name='page_header'}
              <h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
            {/block}
          {/block}
          {block name='product_prices'}
            {include file='catalog/_partials/product-prices.tpl'}
          {/block}

          <div class="product-information">
            {block name='product_description_short'}
              <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div>
            {/block}

            {if $product.is_customizable && count($product.customizations.fields)}
              {block name='product_customization'}
                {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
              {/block}
            {/if}

            <div class="product-actions">
              {block name='product_buy'}
                <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
                  <input type="hidden" name="token" value="{$static_token}">
                  <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
                  <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">

                  {block name='product_variants'}
                    {include file='catalog/_partials/product-variants.tpl'}
                  {/block}

                  {block name='product_pack'}
                    {if $packItems}
                      <section class="product-pack">
                        <h3 class="h4">{l s='This pack contains' d='Shop.Theme.Catalog'}</h3>
                        {foreach from=$packItems item="product_pack"}
                          {block name='product_miniature'}
                            {include file='catalog/_partials/miniatures/pack-product.tpl' product=$product_pack}
                          {/block}
                        {/foreach}
                    </section>
                    {/if}
                  {/block}

                  {block name='product_discounts'}
                    {include file='catalog/_partials/product-discounts.tpl'}
                  {/block}

                  {block name='product_add_to_cart'}
                    {include file='catalog/_partials/product-add-to-cart.tpl'}
                  {/block}

             

                  {block name='product_refresh'}
                    <input class="product-refresh ps-hidden-by-js" name="refresh" type="submit" value="{l s='Refresh' d='Shop.Theme.Actions'}">
                  {/block}
                </form>
              {/block}

            </div>
            {capture name='siteguichart'}{hook h='extraLeft'}{/capture}
            {if $smarty.capture.siteguichart}
            <div id="field_slideshow">{$smarty.capture.siteguichart nofilter}</div>
            {/if}
        </div>

<div class="nav_tabs">
<div class="row">
 {if $product.description}
<div class="tab-content">
<h3>{l s='Description' d='Shop.Theme.Catalog'}</h3>
<div class="title" data-target="#description" 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="description" {if $product.description} class="collapse in" aria-expanded="true" {else}class="collapse"{/if}>
{$product.description nofilter}
</ul>
</div>
{/if}
<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>

    {block name='product_accessories'}
      {if $accessories}
        <div class="block title_center horizontal_mode">
          <h4 class="title_block title_font">
          <span class="title_text">{l s='You might also like' d='Shop.Theme.Catalog'}</span>
          </h4>
          <div class="products">
            {foreach from=$accessories item="product_accessory"}
              {block name='product_miniature'}
                {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
              {/block}
            {/foreach}
          </div>
        </div>
      {/if}
    {/block}




    {block name='product_images_modal'}
      {include file='catalog/_partials/product-images-modal.tpl'}
    {/block}

    {block name='page_footer_container'}
      <footer class="page-footer">
        {block name='page_footer'}
          <!-- Footer content -->
        {/block}
      </footer>
    {/block}
  </section>
{/block}
{block name='product_footer_container'}
  {hook h='displayFooterProduct' product=$product category=$category}
{/block}

[Scully]

what or where is accordion?

posting an example would be of more help than pages of code.