[Skip to main content](#vessel-content)

#   Tabs not closing

##

- **[kyteasdale](/forum/user/31211-kyteasdale "View kyteasdale's Profile")**
- [![kyteasdale's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/31211-kyteasdale "View kyteasdale's Profile") Topic Author
- [ Offline](/forum/user/31211-kyteasdale)

Less More

- Posts: 53
- Thank you received: 0
-
-

9 years 1 month ago [\#278729](#278729) by [kyteasdale](/forum/user/31211-kyteasdale "View kyteasdale's Profile")  *[Tabs not closing](/forum/26-product-category-display/892010-tabs-not-closing#278729 "-- HikaShop version -- : 3.2.0 -- Joomla version -- : 3.7.5 -- PHP version -- : 6  I just upgraded to latest Hikashop and re-added three tabs to the tabular_display as I had before.  I added them using the code given in the FAQ's. However, instead of switching between tabs, the content of the tabs just opens in a div above the former tab and doesn't close.  I,e. "DESCRIPTION" is displayed, I click "SIZES" and that text is displayed, I then click "DELIVERY" and that content is shown in a div above the sizes info etc  How can I separate them to open independently?  (site not available)")* was created by *[kyteasdale](/forum/user/31211-kyteasdale "View kyteasdale's Profile")*

-- HikaShop version -- : 3.2.0
-- Joomla version -- : 3.7.5
-- PHP version -- : 6

I just upgraded to latest Hikashop and re-added three tabs to the tabular_display as I had before.

I added them using the code given in the FAQ's. However, instead of switching between tabs, the content of the tabs just opens in a div above the former tab and doesn't close.

I,e. "DESCRIPTION" is displayed, I click "SIZES" and that text is displayed, I then click "DELIVERY" and that content is shown in a div above the sizes info etc

How can I separate them to open independently?

(site not available)

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTIwMTAtdGFicy1ub3QtY2xvc2luZz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86541
- Thank you received: 14304
-
-

9 years 1 month ago [\#278730](#278730) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Tabs not closing](/forum/26-product-category-display/892010-tabs-not-closing#278730 "-- HikaShop version -- : 3.2.0 -- Joomla version -- : 3.7.5 -- PHP version -- : 6  I just upgraded to latest Hikashop and re-added three tabs to the tabular_display as I had before.  I added them using the code given in the FAQ's. However, instead of switching between tabs, the content of the tabs just opens in a div above the former tab and doesn't close.  I,e. "DESCRIPTION" is displayed, I click "SIZES" and that text is displayed, I then click "DELIVERY" and that content is shown in a div above the sizes info etc  How can I separate them to open independently?  (site not available)")*

Hi,

First, if you do your modifications via the menu Display>Views, you won't loose them when you update HikaShop as they will be stored as view overrides. So this should not happen following an update.
Second, the 3.2.0 version didn't change anything regarding the tabs compared to the previous verison, the 3.1.1. Did you use that version or an older version ? Which one ?
In fact, the modification mentioned in that FAQ is still valid with the 3.2.0 so I can only think of a problem in the way you made the modification after the update.
Unfortunately, without being able to look at the result you have on the page, nor a copy of the view file code you have, I can say anything precise as to what might be the exact problem in what you have.
I would recommend to check again your modifications against the code in the FAQ.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTIwMTAtdGFicy1ub3QtY2xvc2luZz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[kyteasdale](/forum/user/31211-kyteasdale "View kyteasdale's Profile")**
- [![kyteasdale's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/31211-kyteasdale "View kyteasdale's Profile") Topic Author
- [ Offline](/forum/user/31211-kyteasdale)

Less More

- Posts: 53
- Thank you received: 0
-
-

9 years 1 month ago [\#278768](#278768) by [kyteasdale](/forum/user/31211-kyteasdale "View kyteasdale's Profile")  Replied by *[kyteasdale](/forum/user/31211-kyteasdale "View kyteasdale's Profile")* on topic *[Tabs not closing](/forum/26-product-category-display/892010-tabs-not-closing#278768 "-- HikaShop version -- : 3.2.0 -- Joomla version -- : 3.7.5 -- PHP version -- : 6  I just upgraded to latest Hikashop and re-added three tabs to the tabular_display as I had before.  I added them using the code given in the FAQ's. However, instead of switching between tabs, the content of the tabs just opens in a div above the former tab and doesn't close.  I,e. "DESCRIPTION" is displayed, I click "SIZES" and that text is displayed, I then click "DELIVERY" and that content is shown in a div above the sizes info etc  How can I separate them to open independently?  (site not available)")*

It was an upgrade from 2.6.3 - so the changes to show tabular are notable. I had changed the details in Display > Views first time round, but of course, even the grid system changed.
Code:

<?php /** * @package HikaShop for Joomla! * @version 3.2.0 * @author hikashop.com * @copyright (C) 2010-2017 HIKARI SOFTWARE. All rights reserved. * @license GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html */ defined('_JEXEC') or die('Restricted access'); ?><?php hikashop_loadJslib('jquery'); $js = ''; $params = null; $this->params->set('vote_type','product'); if(isset($this->element->main)){ $product_id = $this->element->main->product_id; }else{ $product_id = $this->element->product_id; } $this->params->set('vote_ref_id',$product_id); $this->params->set('productlayout','show_tabular'); $layout_vote_mini = hikashop_getLayout('vote', 'mini', $this->params, $js); $layout_vote_listing = hikashop_getLayout('vote', 'listing', $this->params, $js); $layout_vote_form = hikashop_getLayout('vote', 'form', $this->params, $js); $config =& hikashop_config(); $status_vote = $config->get('enable_status_vote'); $this->setLayout('show_block_dimensions'); $specif_tab_content = trim($this->loadTemplate()); if(!empty($this->fields)){ $this->setLayout('show_block_custom_main'); $specif_tab_content .= trim($this->loadTemplate()); } ?> <div id="hikashop_product_top_part" class="hikashop_product_top_part"> <?php if(!empty($this->element->extraData->topBegin)) { echo implode("\r\n", $this->element->extraData->topBegin); } ?> <h1> <span id="hikashop_product_name_main" class="hikashop_product_name_main" itemprop="name"><?php if (hikashop_getCID('product_id')!=$this->element->product_id && isset ($this->element->main->product_name)) echo $this->element->main->product_name; else echo $this->element->product_name; ?></span> <?php if ($this->config->get('show_code')) { ?> <span id="hikashop_product_code_main" class="hikashop_product_code_main" itemprop="sku"> <span id="hikashop_product_code_main" class="hikashop_product_code_main"><?php echo $this->element->product_code; ?></span> </span> <?php } ?> </h1> <?php if(!empty($this->element->extraData->topEnd)) { echo implode("\r\n", $this->element->extraData->topEnd); } ?> <?php $this->setLayout('show_block_social'); echo $this->loadTemplate(); ?> </div> <div class="hk-row-fluid"> <div id="hikashop_product_left_part" class="hikashop_product_left_part hkc-md-6"> <?php if(!empty($this->element->extraData->leftBegin)) { echo implode("\r\n", $this->element->extraData->leftBegin); } $this->row =& $this->element; $this->setLayout('show_block_img'); echo $this->loadTemplate(); ?> <div id="hikashop_product_description_main_mini" class="hikashop_product_description_main_mini"><?php if(!empty($this->element->product_description)) { $resume = substr(strip_tags(preg_replace('#<hr *id="system-readmore" */>.*#is','',$this->element->product_description)),0,300); if (!empty($this->element->product_description) && strlen($this->element->product_description)>300) $resume .= " ...<a href='#hikashop_show_tabular_description'>".JText::_('READ_MORE')."</a>"; echo JHTML::_('content.prepare',$resume); } ?></div> <?php if(!empty($this->element->extraData->leftEnd)) echo implode("\r\n",$this->element->extraData->leftEnd); ?> </div> <div id="hikashop_product_right_part" class="hikashop_product_right_part hkc-md-6"> <?php if(!empty($this->element->extraData->rightBegin)) echo implode("\r\n",$this->element->extraData->rightBegin); ?> <span id="hikashop_product_price_main" class="hikashop_product_price_main" itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <?php if($this->params->get('show_price') && (empty($this->displayVariants['prices']) || $this->params->get('characteristic_display') != 'list')) { $this->row =& $this->element; $this->setLayout('listing_price'); echo $this->loadTemplate(); ?> <meta itemprop="availability" content="http://schema.org/<?php echo ($this->row->product_quantity != 0) ? 'InStock' : 'OutOfstock' ;?>" /> <?php $CurrId = hikashop_getCurrency(); $null = null; $currency = $this->currencyHelper->getCurrencies($CurrId, $null); $CurrCode = $currency[$CurrId]->currency_code; ?> <meta itemprop="priceCurrency" content="<?php echo $CurrCode; ?>" /> <?php } ?> </span><br /> <div id="hikashop_product_vote_mini" class="hikashop_product_vote_mini"> <?php if($this->params->get('show_vote_product') == '-1') { $this->params->set('show_vote_product', $config->get('show_vote_product')); } if($this->params->get('show_vote_product')) { echo $layout_vote_mini; } ?> </div> <?php if($this->params->get('characteristic_display') != 'list') { $this->setLayout('show_block_characteristic'); echo $this->loadTemplate(); ?> <br /> <?php } $form = ',0'; if(!$this->config->get('ajax_add_to_cart', 1)) { $form = ',\'hikashop_product_form\''; } if(hikashop_level(1) && !empty ($this->element->options)) { ?> <div id="hikashop_product_options" class="hikashop_product_options"><?php $this->setLayout('option'); echo $this->loadTemplate(); ?></div> <br /> <?php $form = ',\'hikashop_product_form\''; if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') { ?> <input type="hidden" name="popup" value="1"/> <?php } } if (!$this->params->get('catalogue') && ($this->config->get('display_add_to_cart_for_free_products') || ($this->config->get('display_add_to_wishlist_for_free_products', 1) && hikashop_level(1) && $this->params->get('add_to_wishlist') && $config->get('enable_wishlist', 1)) || !empty ($this->element->prices))) { if (!empty ($this->itemFields)) { $form = ',\'hikashop_product_form\''; if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') { ?> <input type="hidden" name="popup" value="1"/> <?php } $this->setLayout('show_block_custom_item'); echo $this->loadTemplate(); } } $this->formName = $form; if($this->params->get('show_price')) { ?> <span id="hikashop_product_price_with_options_main" class="hikashop_product_price_with_options_main"></span> <?php } ?> <div id="hikashop_product_contact_main" class="hikashop_product_contact_main"> <?php $contact = $this->config->get('product_contact', 0); if(hikashop_level(1) && ($contact == 2 || ($contact == 1 && !empty($this->element->product_contact)))) { $css_button = $this->config->get('css_button', 'hikabtn'); ?> <a href="<?php echo hikashop_completeLink('product&task=contact&cid=' . (int)$this->element->product_id . $this->url_itemid); ?>" class="<?php echo $css_button; ?>"><?php echo JText::_('CONTACT_US_FOR_INFO'); ?></a> <?php } ?> </div> <?php if(!empty($this->element->extraData->rightMiddle)) echo implode("\r\n",$this->element->extraData->rightMiddle); ?> <span id="hikashop_product_id_main" class="hikashop_product_id_main"> <input type="hidden" name="product_id" value="<?php echo $this->element->product_id; ?>" /> </span> <br /> <?php if(empty ($this->element->characteristics) || $this->params->get('characteristic_display') != 'list') { ?> <div id="hikashop_product_quantity_main" class="hikashop_product_quantity_main"><?php $this->row = & $this->element; $this->ajax = 'if(hikashopCheckChangeForm(\'item\',\'hikashop_product_form\')){ return hikashopModifyQuantity(\'' . $this->row->product_id . '\',field,1' . $form . ',\'cart\'); } else { return false; }'; $this->setLayout('quantity'); echo $this->loadTemplate(); ?></div> <?php } $this->setLayout('show_block_product_files'); echo $this->loadTemplate(); if(HIKASHOP_J30) { $this->setLayout('show_block_tags'); echo $this->loadTemplate(); } if(!empty($this->element->extraData->rightEnd)) echo implode("\r\n",$this->element->extraData->rightEnd); ?> </div> </div> <input type="hidden" name="cart_type" id="type" value="cart"/> <input type="hidden" name="add" value="1"/> <input type="hidden" name="ctrl" value="product"/> <input type="hidden" name="task" value="updatecart"/> <input type="hidden" name="return_url" value="<?php echo urlencode(base64_encode(urldecode($this->redirect_url)));?>"/> </form> <?php $description = trim(JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description))); ?> <div id="hikashop_product_bottom_part" class="hikashop_product_bottom_part show_tabular"> <div id="hikashop_tabs_div"> <ul class="hikashop_tabs_ul"> <?php if(!empty($description)) { ?> <li id="hikashop_show_tabular_description_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_DESCRIPTION');?></li> <?php } ?> <li id="hikashop_show_tabular_sizes_li" class="hikashop_tabs_li ui-corner-top"> <a onclick="displayTab('hikashop_show_tabular_sizes');" href="javascript:void(0);"> <?php echo JText::_('Sizes');?> </a> </li> <li id="hikashop_show_tabular_delivery_li" class="hikashop_tabs_li ui-corner-top"> <a onclick="displayTab('hikashop_show_tabular_delivery');" href="javascript:void(0);"> <?php echo JText::_('Delivery');?> </a> </li> <li id="hikashop_show_tabular_colours_li" class="hikashop_tabs_li ui-corner-top"> <a onclick="displayTab('hikashop_show_tabular_colours');" href="javascript:void(0);"> <?php echo JText::_('Colours');?> </a> </li> <?php if(!empty($specif_tab_content)) { ?> <li id="hikashop_show_tabular_specification_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('SPECIFICATIONS');?></li> <?php } ?> <?php if(in_array($status_vote, array('comment', 'two', 'both'))) { ?> <li id="hikashop_show_tabular_comment_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_COMMENT');?></li> <li id="hikashop_show_tabular_new_comment_li" class="hikashop_tabs_li ui-corner-top"><?php echo JText::_('PRODUCT_NEW_COMMENT');?></li> <?php } ?> <div class="hikashop_tabs_content" id="hikashop_show_tabular_delivery"> {article Delivery}{text} {/article} </div> <div class="hikashop_tabs_content" id="hikashop_show_tabular_sizes"> {article Sizes}{text} {/article} </div> <div class="hikashop_tabs_content" id="hikashop_show_tabular_colours"> {article Colours}{text}{/article} </div> </ul> <?php if(!empty($this->element->extraData->bottomBegin)) echo implode("\r\n",$this->element->extraData->bottomBegin); ?> <div class="hikashop_tabs_content" id="hikashop_show_tabular_description"> <?php if(!empty($description)) { ?> <div id="hikashop_product_description_main" class="hikashop_product_description_main" itemprop="description"><?php echo $description; ?></div> <?php } ?> <span id="hikashop_product_url_main" class="hikashop_product_url_main"><?php if (!empty ($this->element->product_url)) { echo JText::sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>'); } ?></span> </div> <?php if(!empty($specif_tab_content)) { ?> <div class="hikashop_tabs_content" id="hikashop_show_tabular_specification"><?php echo $specif_tab_content; ?></div> <?php } if($status_vote == "comment" || $status_vote == "two" || $status_vote == "both" ) { ?> <form action="<?php echo hikashop_currentURL() ?>" method="post" name="adminForm_hikashop_comment_form" id="hikashop_comment_form"> <?php if(!empty($this->element->extraData->bottomMiddle)) echo implode("\r\n",$this->element->extraData->bottomMiddle); ?> <div class="hikashop_tabs_content" id="hikashop_show_tabular_comment"> <div id="hikashop_vote_listing" data-votetype="product" class="hikashop_product_vote_listing"><?php echo $layout_vote_listing; ?></div> </div> <div class="hikashop_tabs_content" id="hikashop_show_tabular_new_comment"> <div id="hikashop_vote_form" data-votetype="product" class="hikashop_product_vote_form"><?php echo $layout_vote_form; ?></div> </div> </form> <?php } ?> <input type="hidden" name="selected_tab" id="selected_tab" value="hikashop_show_tabular_description"/> <?php if(!empty($this->element->extraData->bottomEnd)) echo implode("\r\n",$this->element->extraData->bottomEnd); ?> </div> </div> <script type="text/javascript"> if(typeof(hkjQuery) == "undefined") window.hkjQuery = window.jQuery; window.hikashop.ready(function(){ var selectedTab = hkjQuery( "#selected_tab" ).val(); hkjQuery("#hikashop_tabs_div").children("div").css("display","none"); hkjQuery("#"+selectedTab+"_li").addClass("hikashop_tabs_li_selected"); hkjQuery("#"+selectedTab).css("display","inherit"); hkjQuery("#hikashop_tabs_div .hikashop_tabs_ul li").click(function(){ var currentLi = hkjQuery(this).attr("id"); var currentDiv = currentLi.replace("_li",""); hkjQuery("#hikashop_tabs_div").children("div").css("display","none"); hkjQuery("#hikashop_tabs_div").children("form").children("div").css("display","none"); hkjQuery("#"+currentDiv).css("display","inherit"); hkjQuery(".hikashop_tabs_li_selected" ).removeClass("hikashop_tabs_li_selected"); hkjQuery("#"+currentLi).addClass("hikashop_tabs_li_selected"); }); }); </script>

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTIwMTAtdGFicy1ub3QtY2xvc2luZz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")**
- [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile")
- [ Offline](/forum/user/63-nicolas)

Less More

- Posts: 86541
- Thank you received: 14304
-
-

9 years 1 month ago [\#278780](#278780) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile")  Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Tabs not closing](/forum/26-product-category-display/892010-tabs-not-closing#278780 "-- HikaShop version -- : 3.2.0 -- Joomla version -- : 3.7.5 -- PHP version -- : 6  I just upgraded to latest Hikashop and re-added three tabs to the tabular_display as I had before.  I added them using the code given in the FAQ's. However, instead of switching between tabs, the content of the tabs just opens in a div above the former tab and doesn't close.  I,e. "DESCRIPTION" is displayed, I click "SIZES" and that text is displayed, I then click "DELIVERY" and that content is shown in a div above the sizes info etc  How can I separate them to open independently?  (site not available)")*

Hi,

The issue is that you put the code: Code:

<div class="hikashop_tabs_content" id="hikashop_show_tabular_delivery"> {article Delivery}{text} {/article} </div> <div class="hikashop_tabs_content" id="hikashop_show_tabular_sizes"> {article Sizes}{text} {/article} </div> <div class="hikashop_tabs_content" id="hikashop_show_tabular_colours"> {article Colours}{text}{/article} </div>

inside the ul of the tabs titles instead of putting it after the line: Code:

<div class="hikashop_tabs_content" id="hikashop_show_tabular_description">

where the other tabs contents are located.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84OTIwMTAtdGFicy1ub3QtY2xvc2luZz90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.056 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)