It changes the div contents like you wanted. Its not vertical but you said that making it wouldn't be a problem. Same script
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#tablist{
padding: 3px 0;
margin:0;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
margin: 0;
width:150px;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
display:block;
}
#tablist li a:link, #tablist li a:visited{
color: #FFF;
}
#tablist li a.current{
background: lightyellow;
}
#tabcontentcontainer{
width: 400px;
/ Insert Optional Height definition here to give all the content a unified height /
padding: 5px;
border: 1px solid black;
}
.tabcontent{
display:none;
}
a.tab {
background:black;
}
a.tab:active{
background:red;
}
</style>
<script type="text/javascript">
/********************************************
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, "sc1"]
////////Stop editting////////////////