...

View Full Version : Help with accordions



hirsty
09-28-2011, 09:16 PM
Hello CodingForums users :D 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 :D

horizAccordion.js:


/*
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:


// 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:


@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:


<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum