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
Before you post, read our: 
Help with accordions
