Главная

в шаблоне товара маленький скрипт (лучше вынести отдельно, чтоб не гадить)
../components/com_jshopping/templates/default/product/product_default.php

jQuery(function(){
jQuery('dl.tabs dt').click(function(){
jQuery(this)
.siblings().removeClass('selected').end()
.next('dd').andSelf().addClass('selected');
});
});

сами табы (тут же в шаблоне в нужное место, с необходимым содержимым)
Скрыть текстовый блок
Код
<dl class="tabs">
<dt class="selected">Описание</dt>
<dd class="selected">
<div class="tab-content">
<div class = "jshop_prod_description">
<?php print $this->product->description; ?>
</div></div>
</dd>
<dt>Отзывы</dt>
<dd>
<div class="tab-content">
<?php print $this->_tmp_product_html_before_review; include(dirname(__FILE__)."/review.php");?>
</div>
</dd>
<dt>Сопутствующие товары</dt>
<dd>
<div class="tab-content">
<?php print $this->_tmp_product_html_before_related; include(dirname(__FILE__)."/related.php");?>
</div>

CSS в файл стилей
.tabs {
width:100%;
overflow:hidden;
font-size:0.9em;
margin:2em 0;
zoom:1;
padding:1px;
position:relative;
}

.tabs dt {
float:left;
line-height:2;
height:2em;
background:#e8f0f5;
border:1px solid #e8f0f5;
border-bottom:0;
padding:0 1em;
position:relative;
left:35px;
margin-right:1px;
cursor:pointer;

-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

.tabs dt:hover {
background-color:#bfdff4;
}

.tabs dt.selected {
border-color:#b0d0e9;
background:#fff;
z-index:3;
cursor:auto;
}

.tabs dd {
background:#fff;
display:none;
float:right;
width:100%;
margin:2em 0 0 -100%;
position:relative;
z-index:2;
}

.tabs dd.selected {
display:block;
}

.tabs .tab-content {
border:1px solid #b0d0e9;
padding:20px;

-webkit-border-radius:20px;
-moz-border-radius:20px;
}