Табы в описании товара - [VM1] Управление товарами, атрибутами, типами, ценами

<table  align="center" border="0" style="width: 82%;">
  <tbody>
	  	<tr>
	  <td rowspan="1" colspan="2">
	  	<?php 
$template = '{magictabs style=darkblue_rounded, tabwidth=131px}'; 
$template .= $VM_LANG->_('PHPSHOP_PRODUCT_DESC_TITLE'); 
$template .= '::'; 
$template .= $product_description; 
$template .= '||||';
$template .= $VM_LANG->_('PHPSHOP_MORE_IMAGES'); 
$template .= '::'; 
/**$template .= '<table><tr><td>';*/ 
$template .= $this->vmlistAdditionalImages( $product_id, $images ); 
/**$template .= '</td></tr></table>';*/
$template .= '||||'; 
$template .= $VM_LANG->_('PHPSHOP_REVIEWS'); 
$template .= '::'; 
/**$template .= '<table><tr><td>';*/ 
$template .= $product_reviews;
$template .= $product_reviewform; 
/**$template .= '</td></tr></table>';*/


$template .= '{/magictabs}'; 
?> 

<?php echo JHTML::_('content.prepare', $template); ?>
	  	<span style="font-style: italic;"><?php echo $file_list ?></span>
	  </td>
	<tr>
	  <td colspan="1"><?php echo $product_type ?></td>
	</tr>
  </tbody>
</table>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#tabs {margin: 0px auto;overflow: hidden;width: 204px;}
#tabs div {border-left: 1px solid #DDD;overflow: hidden;width: 205px;height: 22px;}
div a {display: block;float: left;width: 48px;border: 1px solid #DDD;border-left: none;text-align: center;text-decoration: none;}
div a:hover {background: #FBFBFB;}
ul {display: block;margin: 0px;padding: 0px;width: auto;height: auto;}
li {border: 1px solid #DDD;border-top: none;display: none;float: left;list-style-type: none;width: 195px;height: 50px;}
.display, .first {background: #EBFAFE;display: block;}
</style>
	 
<script type="text/javascript">
  $(function(){
     $('div a').each(function(i){
        $(this).click(function(){
           $(this).toggleClass('display').siblings().removeClass('display first');
             $('ul').each(function(){
               $(this).find('li:eq('+i+')').toggleClass('display').siblings().removeClass('display first');
           });
       });
    });
});
</script>
<div id="tabs">
   <div>
       <a class="first" href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
    </div>
   <ul>
        <li class="first">#text_tab_1</li><li>#text_tab_2</li><li>#text_tab_3</li><li>#text_tab_4</li>
    </ul>
</div>