Hello CodingForums users will try explain this as best i can although i am half asleep! Ok basically ive used and modified an Accordion style menu for a website....which works fine the trouble is that i plan to also nest an accordion also...which doesnt want to play >.> i need help lol javascript isnt my strong point

horizAccordion.js:
Code:
/*
	Created By: Aaron Tennyson @ BT Solutions, LLC
	Date: May 11, 2010
	Copyright 2010 BT Solutions, LLC
	Visit our Website at http://btsolutionsllc.com
*/	

function accordion(rate){
	
	var tab = $('#wrapper').find('h3'),
	visible = tab.next().filter(':first'),
	width = visible.outerWidth();
		
		//hide all but first panel, set width to zero for animate function to work
		tab.next().filter(':not(:first)').css({display:'none', width:0});
		
		//attach click handler
		tab.click(function(){
			if(visible.prev()[0] == this){
				return;
			}
			visible.animate({width:0},{duration:rate});
			visible = $(this).next().animate({width:width},{duration:rate});
		});
	};

$(document).ready(function(){
	accordion(350);

});
accordion.js:

Code:
// JavaScript Document
function vertical_accordion(rate){
	
	var vtab = $('#wrapper').find('h4'),
	visible = vtab.next().filter(':first'),
	height = visible.outerHeight();
		
		//hide all but first panel, set height to zero for animate function to work
		vtab.next().filter(':not(:first)').css({display:'none', height:0});
		
		//attach click handler
		vtab.click(function(){
			if(visible.prev()[0] == this){
				return;
			}
			visible.animate({height:0},{duration:rate});
			visible = $(this).next().animate({height:height},{duration:rate});
		});
	};

$(document).ready(function(){
	vertical_accordion(350);

});
CSS:

Code:
@charset "utf-8";
/* CSS Document */

* {
	padding: 0;
	margin: 0;
}
html
{
	height:100%;
	width:100%;
	color:#FFF;
	
}
body
{
	height:100%;
	width:100%;
	margin: 0;
}

h2 {	
}

h3 {
	float: left;
}
p
{
	margin:15px;
}

#header
{
	background: #666 url(images/carbon.png) no-repeat;
	height:10%;
}
#footer
{
	background: #666 url(images/carbon.png) no-repeat;
	height:5%;
	width:100%;
	bottom:0px;
	position:absolute;
	left:0px;
}
#footer table tr td 
{
	text-align: center;
	color: #FFF;
}
#wrapper {
	margin: 0px;
	height:85%;
	width:100%;
	right:0;
	position: fixed;
	background: #666;
   
    left: 0px;
}

#wrapper h3 a  {
	text-indent: -9999px;
	height: 100%;
	width: 81px;
	float: left;
}  

.tab
{
	height:100%;
	width:81px;
}
.about
{
	background: #CCC url(images/about.png) no-repeat;
	background-size: 100%;
}
.video
{
	background: #CCC url(images/Video.png) no-repeat;
	background-size: 100%;
}
.distrib
{
	background: #CCC url(images/distrib.png) no-repeat;
	background-size: 100%;
}
.downloads
{
	background: #CCC url(images/downloads.png) no-repeat;
	background-size: 100%;
}
.machines
{
	background: #CCC url(images/machines.png) no-repeat;
	background-size: 100%;
}
.box {
	float: left;
	height:100%;
	width:71.85%;
	border: 0;

	margin: 0;
    background-image: none;
	position: relative;
	overflow: hidden;
}
.machinestable
{
	padding:15px;	
}
#details
{
	margin: 0px;
	height:600px;
	width:400px;
	right:0;
	background: #0F0;
}
#details h4 a  {
	text-indent: -9999px;
	width: 100%;
	height: 25px;
	float: left;
}  

.dettab
{
	height:25px;
	width:100%;
}
.description
{
	background: #CCC url(images/accordion_toggle.jpg) no-repeat;
	background-size: 100%;
}
.gallery
{
	background: #CCC url(images/accordion_toggle.jpg) no-repeat;
	background-size: 100%;
}
.detbox {
	float: top;
	height:30%;
	width:100%;
	border: 0;

	margin: 0;
    background-image: none;
	position: relative;
	overflow: hidden;
}
part of index page:

Code:
<div id="wrapper">
    <h3 class="tab about"><a href="#tab"></a></h3>
    <div id="tab" class="tab box">
    <p>Click <a href="http://www.developphp.com" target="_blank">HERE</a> to visit DevelopPHP.com for more awesome tutorials.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p></div>
    <h3 class="tab machines"><a href="#tab">Tab 2</a></h3>
    <div id="tab" class="tab box">
      <p>
            <table width="1000" class="machinestable">
        <tr>
          <td width="400" valign="top" > <label>
            <input type="radio" name="machines" onclick="javascript:ThreeLane()" value="radio" id="tlane" checked="checked" />
            Three Lane</label><BR />
            <label>
            <input type="radio" name="machines" onclick="javascript:SingleLaneMa()" value="radio" id="" />
            Single Lane Major</label><BR />
            <label>
            <input type="radio" name="machines" onclick="javascript:SingleLaneMi()" value="radio" id="slanemi" />
            Single Lane Mini</label><BR />
            <label>
            <input type="radio" name="machines" onclick="javascript:baguette()" value="radio" id="baguette" />
            Baguette</label><BR />
            <label>
            <input type="radio" name="machines" onclick="javascript:bagel()" value="radio" id="bagel" />
            Bagel</label><BR />
            </td>
            <td>
            <div id="details">
            <h4 class="dettab description"><a href="#vtab"></a></h4>
            <div id="dettab" class="description detbox">
    <p>Click <a href="http://www.developphp.com" target="_blank">HERE</a> to visit DevelopPHP.com for more awesome tutorials.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
    <p id="Description">fdgdfrsgdaddgfdsgsg</p>
      <img name="img1" src="http://tutorialbin.com/media/uploads/icons/cooking-icon-50x50___.png" />  
      </div>
     
    <h4 class="dettab gallery"><a href="#vtab"></a></h4>
                <div id="dettab" class="gallery detbox">
    <p>Click <a href="http://www.developphp.com" target="_blank">HERE</a> to visit DevelopPHP.com for more awesome tutorials.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p></div>
   
          <h4 class="dettab gallery"><a href="#vtab"></a></h4>
                <div id="dettab" class="gallery detbox">
    <p>Click <a href="http://www.developphp.com" target="_blank">HERE</a> to visit DevelopPHP.com for more awesome tutorials.<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p></div>
      </div>
            </td>
        </tr>

      </table>
      </p>
      
      <BR />

</div>    
    <h3 class="tab distrib"><a href="#tab">Tab 3</a></h3>        
    <div id="tab" class="tab box"><table><TR  height="100%"><TD>ffd</TD></TR></table>
    </div>
    <h3 class="tab downloads"><a href="#tab">Tab 2</a></h3>
    <div id="tab downloads" class="tab box">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna </p>
</div>
Im wanting to create a vertical accordion within a horrizontal one :/ but again it doesnt want to play >_< Please help