Accordion Product Tabs

lpgz710 · August 7, 2017

i want to have only one div open in product tabs each time. When i click to one the other one to close

this is my product.tpl

{**
* 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'}
          
        {/block}
      </footer>
    {/block}
</section>
{/block}
{block name='product_footer_container'}
{hook h='displayFooterProduct' product=$product category=$category}
{/block}

lpgz710 · August 8, 2017

i want my tabs to work like this

https://www.spitishop.gr/%CF%83%CE%B5%CE%BD%CF%84%CF%8C%CE%BD%CE%B9%CE%B1-%CE%B7%CE%BC%CE%AF%CE%B4%CE%B9%CF%80%CE%BB%CE%B1-%CF%83%CE%B5%CF%84-nima-cotton-n-style-vienna-02-57141.html

i want only tab open per time

Sign In

Accordion Product Tabs

Recommended Posts

lpgz710

Link to comment

Share on other sites

lpgz710

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com