need some help if possible

need some help if possible

hi there, i wonder if someone can help. i am trying to build a  accordion with 3 pages in every  accordion. i spoke to a nice fella yesterday and he started me off but i cannot work out how to finish it off i wonder if someone can help, many thanks, Gary

webpage that it is on is  http://cumcloser.co.uk/


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
<link href="style/main.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".accordion2 h3").eq(2).addClass("active");
$(".accordion2 p").eq(2).hide();

$(".accordion2>h3").click(function(){
$(this).next().slideToggle("slow").siblings(":not(h3):visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
// When user clicks on tab, this code will be executed
$("#tabs>li").click(function() {
// First remove class "active" from currently active tab
$("#tabs>li").removeClass('active');
 
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
console.log(selected_tab)
// Show the selected tab content
$(selected_tab).fadeIn().children().fadeIn().end().siblings().fadeOut();
 
// At the end, we add return false so that the click on the link is not executed
return false;
}).eq(0).click();
});



$(document).ready(function(){
$(".accordion3 h3").eq(2).addClass("active");
$(".accordion3 p").eq(2).hide();

$(".accordion3>h3").click(function(){
$(this).next().slideToggle("slow").siblings(":not(h3):visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
// When user clicks on tab, this code will be executed
$("#tabs>li").click(function() {
// First remove class "active" from currently active tab
$("#tabs>li").removeClass('active');
 
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
console.log(selected_tab)
// Show the selected tab content
$(selected_tab).fadeIn().children().fadeIn().end().siblings().fadeOut();
 
// At the end, we add return false so that the click on the link is not executed
return false;
}).eq(0).click();
});




$(document).ready(function(){
$(".accordion4 h3").eq(2).addClass("active");
$(".accordion4 p").eq(2).hide();

$(".accordion4>h3").click(function(){
$(this).next().slideToggle("slow").siblings(":not(h3):visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
// When user clicks on tab, this code will be executed
$("#tabs>li").click(function() {
// First remove class "active" from currently active tab
$("#tabs>li").removeClass('active');
 
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
console.log(selected_tab)
// Show the selected tab content
$(selected_tab).fadeIn().children().fadeIn().end().siblings().fadeOut();
 
// At the end, we add return false so that the click on the link is not executed
return false;
}).eq(0).click();
});






$(document).ready(function(){
$(".accordion5 h3").eq(2).addClass("active");
$(".accordion5 p").eq(2).hide();

$(".accordion5>h3").click(function(){
$(this).next().slideToggle("slow").siblings(":not(h3):visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
// When user clicks on tab, this code will be executed
$("#tabs>li").click(function() {
// First remove class "active" from currently active tab
$("#tabs>li").removeClass('active');
 
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
console.log(selected_tab)
// Show the selected tab content
$(selected_tab).fadeIn().children().fadeIn().end().siblings().fadeOut();
 
// At the end, we add return false so that the click on the link is not executed
return false;
}).eq(0).click();
});




$(document).ready(function(){
$(".accordion6 h3").eq(2).addClass("active");
$(".accordion6 p").eq(2).hide();

$(".accordion6>h3").click(function(){
$(this).next().slideToggle("slow").siblings(":not(h3):visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
// When user clicks on tab, this code will be executed
$("#tabs>li").click(function() {
// First remove class "active" from currently active tab
$("#tabs>li").removeClass('active');
 
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
console.log(selected_tab)
// Show the selected tab content
$(selected_tab).fadeIn().children().fadeIn().end().siblings().fadeOut();
 
// At the end, we add return false so that the click on the link is not executed
return false;
}).eq(0).click();
});








</script>
<style type="text/css"> 

.accordion2 {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion2 h3 {
background: #5CACEE url(style/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion2 h3:hover {
background-color: #B0E2FF;
}
.accordion2 h3.active {
background-position: right 5px;
}
.accordion2 p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
display: none;
}



.accordion2 {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion2 h3 {
background: #5CACEE url(style/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion2 h3:hover {
background-color: #B0E2FF;
}
.accordion2 h3.active {
background-position: right 5px;
}
.accordion2 p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
display: none;
}





.accordion3 {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion3 h3 {
background: #5CACEE url(style/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion3 h3:hover {
background-color: #B0E2FF;
}
.accordion3 h3.active {
background-position: right 5px;
}
.accordion3 p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
display: none;
}




.accordion4 {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion4 h3 {
background: #5CACEE url(style/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion4 h3:hover {
background-color: #B0E2FF;
}
.accordion4 h3.active {
background-position: right 5px;
}
.accordion4 p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
display: none;
}




.accordion5 {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion5 h3 {
background: #5CACEE url(style/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion5 h3:hover {
background-color: #B0E2FF;
}
.accordion5 h3.active {
background-position: right 5px;
}
.accordion5 p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
display: none;
}



.accordion6 {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion6 h3 {
background: #5CACEE url(style/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion6 h3:hover {
background-color: #B0E2FF;
}
.accordion6 h3.active {
background-position: right 5px;
}
.accordion6 p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
display: none;
}





#tabs_wrapper {
    width: 422px;
}
#tabs_container {
    border-bottom: 1px solid #ccc;
}
#tabs_container1 {
    border-bottom: 1px solid #ccc;
}
#tabs_container2 {
    border-bottom: 1px solid #ccc;
}
#tabs_container3 {
    border-bottom: 1px solid #ccc;
}
#tabs_container4 {
    border-bottom: 1px solid #ccc;
}
#tabs {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 10px;
    font: 0.75em arial;
}
#tabs1 {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 10px;
    font: 0.75em arial;
}
#tabs2 {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 10px;
    font: 0.75em arial;
}
#tabs3 {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 10px;
    font: 0.75em arial;
}
#tabs4 {
    list-style: none;
    padding: 5px 0 4px 0;
    margin: 0 0 0 10px;
    font: 0.75em arial;
}
#tabs li {
    display: inline;
}
#tabs li a {
    border: 1px solid #ccc;
    padding: 4px 6px;
    text-decoration: none;
    background-color: #eeeeee;
    border-bottom: none;
    outline: none;
    border-radius: 5px 5px 0 0;
}
#tabs li a:hover {
    background-color: #dddddd;
    padding: 4px 6px;
}
#tabs li.active a {
    border-bottom: 1px solid #fff;
    background-color: #fff;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
#tabs li.active a:hover {
    background-color: #eeeeee;
    padding: 4px 6px 5px 6px;
    border-bottom: none;
}
 
#tabs li a.icon_accept {
    background-image: url(accept.png);
    background-position: 5px;
    background-repeat: no-repeat;
    padding-left: 24px;
}
#tabs li a.icon_accept:hover {
    padding-left: 24px;
}
 
#tabs_content_container {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
    width: 455px;
}
#tabs_content_container1 {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
    width: 455px;
}
#tabs_content_container2 {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
    width: 455px;
}
#tabs_content_container3 {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
    width: 455px;
}
#tabs_content_container4 {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
    width: 455px;
}
.tab_content {
}







</style>
</head>

<body>

<?php include_once "header.php";?>

<table width="940" border="0" align="center" cellpadding="0" cellspacing="0" style="background-image:url(style/bgnav.jpg);width:940px; height:30px;">
  <tr>
    <td><div  id="wrapper">
<div id="navMenu">
<ul>
<li><a href="http://cumcloser.co.uk">Home</a> </li>
</ul>
<ul>
<li><a href="http://cumcloser.co.uk/about.php">About</a> 
<ul>
<li><a href="http://cumcloser.co.uk/portfolio.php">portfolio</a></li>
<li><a href="http://cumcloser.co.uk/questionaire.php">"questionaire"</a></li>
<li><a href="http://cumcloser.co.uk/contact.php">"Contact"</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://cumcloser.co.uk/contact.php">Contact</a> 
<ul>
<li><a href="#">"link Item"</a></li>
<li><a href="#">"link Item"</a></li>
<li><a href="#">"link Item"</a></li>
</ul>
</li>
</ul>
<br class="clearFloat"/>
</div>
</div></td>
  </tr>
</table>


<table width="940" border="0" align="center" cellpadding="50" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="554">&nbsp;</td>
<td width="180">&nbsp;</td>
</tr>
<tr>
<td>jnfjnfvnmnmndfjn</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><div class="accordion2">
<h3>Design</h3>
<div id="tabs_container">
<ul id="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a class="icon_accept" href="#tab2">Tab with icon</a></li>
<li><a href="#tab3">Long name for the last tab</a></li>
</ul>
<div id="tabs_content_container">
<div id="tab1" class="tab_content" style="display: block;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
</div>
<div id="tab2" class="tab_content">
<p>This tab has icon in it.</p>
</div>
<div id="tab3" class="tab_content">
<p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
</div>
</div>
</div>

<div class="accordion3">
<h3>Logo</h3>
<div id="tabs_container1">
<ul id="tabs1">
<li class="active"><a href="#tab4">Tab 1</a></li>
<li><a class="icon_accept" href="#tab5">Tab with icon</a></li>
<li><a href="#tab6">Long name for the last tab</a></li>
</ul>
<div id="tabs_content_container1">
<div id="tab4" class="tab_content" style="display: block;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
</div>
<div id="tab5" class="tab_content">
<p>This tab has icon in it.</p>
</div>
<div id="tab6" class="tab_content">
<p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
</div>
</div>
</div>

<div class="accordion4">
<h3>Another Questio here</h3>
<div id="tabs_container2">
<ul id="tabs2">
<li class="active"><a href="#tab7">Tab 1</a></li>
<li><a class="icon_accept" href="#tab8">Tab with icon</a></li>
<li><a href="#tab9">Long name for the last tab</a></li>
</ul>
<div id="tabs_content_container2">
<div id="tab7" class="tab_content" style="display: block;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
</div>
<div id="tab8" class="tab_content">
<p>This tab has icon in it.</p>
</div>
<div id="tab9" class="tab_content">
<p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
</div>
</div>
</div>


<div class="accordion5">
<h3>Sample heading</h3>
<div id="tabs_container3">
<ul id="tabs3">
<li class="active"><a href="#tab10">Tab 1</a></li>
<li><a class="icon_accept" href="#tab11">Tab with icon</a></li>
<li><a href="#tab12">Long name for the last tab</a></li>
</ul>
<div id="tabs_content_container3">
<div id="tab10" class="tab_content" style="display: block;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
</div>
<div id="tab11" class="tab_content">
<p>This tab has icon in it.</p>
</div>
<div id="tab12" class="tab_content">
<p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
</div>
</div>
</div>

<div class="accordion6">
<h3>Sample Question Heading</h3>
<div id="tabs_container4">
<ul id="tabs4">
<li class="active"><a href="#tab13">Tab 1</a></li>
<li><a class="icon_accept" href="#tab14">Tab with icon</a></li>
<li><a href="#tab15">Long name for the last tab</a></li>
</ul>
<div id="tabs_content_container4">
<div id="tab13" class="tab_content" style="display: block;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
</div>
<div id="tab14" class="tab_content">
<p>This tab has icon in it.</p>
</div>
<div id="tab15" class="tab_content">
<p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p>
</div>
</div>
</div>
</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>











<?php include_once "footer.php";?>

</body>
</html>