[CopperB]

First off thanks to PhilJ. This is an excellent mod. Also thanks to Bella Forma for the if statement code to only show the tabs when they have content and to soleag for the main details code.

mffowler was looking for complete code for this mod so here it is. I have taken PhilJ and Bella Forma's code and made a few changes to the CSS to go with my site.

I have only used this in v4.0.11

This will open the complete Product Details as the fist tab
This will also only show the tabs when they have content.

1) Create a file called skin1/tabs.css

  
#tablist{ 
padding: 3px 0; 
margin-left: 0; 
margin-bottom: 0; 
margin-top: 0.1em; 
font: bold 12px Verdana; 
} 

#tablist li{ 
list-style: none; 
display: inline; 
margin: 0; 
} 

#tablist li a{ 
padding: 3px 0.5em; 
margin-left: 3px; 
border: 1px solid #6666FF; 
border-bottom: 1px solid #6666FF; 
background: white; 
} 

#tablist li a:link, #tablist li a:visited{ 
color: #6666FF; 
} 

#tablist li a.current{ 
background: #FFFFFF; 
} 

#tabcontentcontainer{ 
width: 90%; 
/* Insert Optional Height definition here to give all the content a unified height */ 
padding: 5px; 

} 

.tabcontent{ 
display:none; 
} 

2) Create a file called skin1/tabs.js

/*********************************************** 
* Tab Content script- б╘ Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* This notice MUST stay intact for legal use 
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 
***********************************************/ 

//Set tab to intially be selected when page loads: 
//[which tab (1=first tab), ID of tab content to display]: 
var initialtab=[1, "sc0"] 

////////Stop editting//////////////// 

function cascadedstyle(el, cssproperty, csspropertyNS){ 
if (el.currentStyle) 
return el.currentStyle[cssproperty] 
else if (window.getComputedStyle){ 
var elstyle=window.getComputedStyle(el, "") 
return elstyle.getPropertyValue(csspropertyNS) 
} 
} 

var previoustab="" 

function expandcontent(cid, aobject){ 
if (document.getElementById){ 
highlighttab(aobject) 
detectSourceindex(aobject) 
if (previoustab!="") 
document.getElementById(previoustab).style.display="none" 
document.getElementById(cid).style.display="block" 
previoustab=cid 
if (aobject.blur) 
aobject.blur() 
return false 
} 
else 
return true 
} 

function highlighttab(aobject){ 
if (typeof tabobjlinks=="undefined") 
collecttablinks() 
for (i=0; i<tabobjlinks.length; i++) 
tabobjlinks[i].style.backgroundColor=initTabcolor 
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor 
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor 
} 

function collecttablinks(){ 
var tabobj=document.getElementById("tablist") 
tabobjlinks=tabobj.getElementsByTagName("A") 
} 

function detectSourceindex(aobject){ 
for (i=0; i<tabobjlinks.length; i++){ 
if (aobject==tabobjlinks[i]){ 
tabsourceindex=i //source index of tab bar relative to other tabs 
break 
} 
} 
} 

function do_onload(){ 
var cookiecheck=window.get_cookie && get_cookie(window.location.pathname).indexOf("|")!=-1 
collecttablinks() 
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color") 
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color") 
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){ 
var cookieparse=get_cookie(window.location.pathname).split("|") 
var whichtab=cookieparse[0] 
var tabcontentid=cookieparse[1] 
expandcontent(tabcontentid, tabobjlinks[whichtab]) 
} 
else 
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1]) 
} 

if (window.addEventListener) 
window.addEventListener("load", do_onload, false) 
else if (window.attachEvent) 
window.attachEvent("onload", do_onload) 
else if (document.getElementById) 
window.onload=do_onload 




//Dynamicdrive.com persistence feature add-on 
///////////////////////////////////////////// 

var enablepersistence=false //true to enable persistence, false to turn off (or simply remove this entire script block). 

function get_cookie(Name) { 
var search = Name + "=" 
var returnvalue = ""; 
if (document.cookie.length > 0) { 
offset = document.cookie.indexOf(search) 
if (offset != -1) { 
offset += search.length 
end = document.cookie.indexOf(";", offset); 
if (end == -1) end = document.cookie.length; 
returnvalue=unescape(document.cookie.substring(offset, end)) 
} 
} 
return returnvalue; 
} 

function savetabstate(){ 
document.cookie=window.location.pathname+"="+tabsourceindex+"|"+previoustab 
} 

window.onunload=savetabstate 

//Dynamicdrive.com persistence feature add-on 
/////////////////////////////////////////////

3) Now create a new file called "overview.tpl" and save the following into skin1/customer/main/overview.tpl

{* $Id: overview.tpl,v 1.6.2.2 2004/12/10 13:14:52 max Exp $ *}
<table width="100%" border="0">
  <tr>
    <td><SPAN class=>
{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if}
</SPAN></td>
    <td></td>
  </tr>
</table> 

4) in skin1/customer/home.tpl

underneath...

<LINK rel="stylesheet" href="{$SkinDir}/skin1.css">

add...

<LINK rel="stylesheet" href="{$SkinDir}/tabs.css">

5) find skin1/customer/main/product.tpl

add this code to the top of the page...

<script language=JavaScript1.3 src="{$SkinDir}/tabs.js"></script>

then right above... (this is to have the main details show)

{/capture}

Add:

 
<a name="tabs"></a> 
<ul id="tablist"> [*]Product Details[*]Send to Friend 
{if $images ne ""}[*]Detailed Images
{/if}
{if $active_modules.Upselling_Products eq ""} [*]Related Products 
{else} 
{/if}[*]Recommended Products
 {if $active_modules.Customer_Reviews ne ""}
  {if $config.Modules.customer_voting eq "Y" or $config.Modules.customer_reviews eq "Y"}[*]Customer Reviews
{/if}
{/if}[/list]<DIV id="tabcontentcontainer"> 
<div id="sc0" class="tabcontent"> 
{include file="customer/main/overview.tpl" } 
</div> 
<div id="sc1" class="tabcontent"> 
{include file="customer/main/send_to_friend.tpl" } 
</div> 
<div id="sc2" class="tabcontent"> 
{if $active_modules.Detailed_Product_Images ne ""} 
{include file="modules/Detailed_Product_Images/product_images.tpl" } 
{/if} 
</div> 
<div id="sc3" class="tabcontent"> 
{if $active_modules.Upselling_Products ne ""} 
{include file="modules/Upselling_Products/related_products.tpl" } 
{/if} 
</div> 
<div id="sc4" class="tabcontent"> 
{if $active_modules.Recommended_Products ne ""} 
{include file="modules/Recommended_Products/recommends.tpl" } 
{/if} 
</div> 
<div id="sc5" class="tabcontent"> 
{if $active_modules.Customer_Reviews ne ""} 
{include file="modules/Customer_Reviews/vote_reviews.tpl" } 
{/if} 
</div> 
</DIV>
{/capture}

Then remove the block of code that this replaces. ie.

remove...

Code:




{include file="customer/main/send_to_friend.tpl" }
{if $active_modules.Detailed_Product_Images ne ""}



{include file="modules/Detailed_Product_Images/product_images.tpl" }
{/if}
{if $active_modules.Upselling_Products ne ""}



{include file="modules/Upselling_Products/related_products.tpl" }
{/if}
{if $active_modules.Recommended_Products ne ""}



{include file="modules/Recommended_Products/recommends.tpl" }
{/if}
{if $active_modules.Customer_Reviews ne ""}



{include file="modules/Customer_Reviews/vote_reviews.tpl" }
{/if}

Once again.. Awesome mod and thanks to everyone who contributed on it. I hope compiling it all in one spot will help a few people out.