Using two accordion scripts on the same page

[inmalagadesign]

1) Script Title: Accordian

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordionmenu.htm

3) Describe problem: Hi I am redeveloping my site and using the accordian script to replace the original text menus that are there already. We set up the left menu on our testing server and that worked fine however whe added the right menu we found that neither menus expanded anymore can the two scripts conflict with each other and if so what can be done about it I would appreciate any help you could provide. We cannot show a link at present as it is a private server but can sort something out at a pinch if need be.

Thanks in advance for all of your help

Kind Regards

Tim

[jscheuer1]

Most likely you created a conflict or a simple syntax error, but it really could be anything.

Two of these scripts can go on the same page. You should have only one each of the main scripts (jquery and ddaccordion), and then two distinct initializations, ex:

<script type="text/javascript">

//Initialize first Accordion:
ddaccordion.init({
	headerclass: "mypets", //Shared CSS class name of headers group
	contentclass: "thepet", //Shared CSS class name of contents group
	revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})

//Initialize 2nd Accordion:
ddaccordion.init({
	headerclass: "technology", //Shared CSS class name of headers group
	contentclass: "thelanguage", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: false, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: false, //persist state of opened contents within browser session?
	toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' style='width:13px; height:13px' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' style='width:13px; height:13px' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})

</script>

The distinct classes defined should be used in the HTML markup, one set for the one accordion, one for the other accordion, ex:

<!-- 1st Accordion -->

<h3 class="mypets">Dogs</h3>
<div class="thepet">
<img src="dog.jpg" style="float:right; margin: 5px" />
The dog is a domestic subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been (and continues to be) one of the most widely-kept working and companion animals in human history, as well as being a food source in some cultures.
</div>

<h3 class="mypets">Cats</h3>
<div class="thepet">
The Cat, also known as the Domestic Cat or House Cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years.
</div>

<h3 class="mypets">Rabbits</h3>
<div class="thepet">
Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are seven different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbit (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, endangered species on Amami O-shima, Japan). There are many other species of rabbit, and these, along with cottontails, pikas, and hares, make up the order Lagomorpha. Rabbits generally live between four and twenty years.
</div>

<!-- 2nd Accordion -->
<div class="technology">What is JavaScript?</div>
<div class="thelanguage">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<div class="technology">Difference betwen Java & JavaScript?</div>
<div class="thelanguage">
Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.
</div>

<div class="technology">What is Ajax?</div>
<div class="thelanguage">
Ajax is a group of inter-related web development techniques used for creating interactive web applications. A primary characteristic is the increased responsiveness and interactiveness of web pages achieved by exchanging small amounts of data with the server "behind the scenes" so that the entire web page does not have to be reloaded each time the user performs an action. This is intended to increase the web page's interactivity, speed, functionality, and usability.
</div>

See:

http://www.dynamicdrive.com/dynamici...daccordion.htm

for more details on the basic script involved here, and:

http://www.dynamicdrive.com/dynamici...daccordion.htm

for a page showing two of the menus on one page.

If you need more help, a demo of what you have would be very good. Put one up somewhere on the web and provide a link to it for us.

[inmalagadesign]

Hi John

Thanks for that the problem seems to be with having both left and right panels on the same page. We are using a php site and including the content as a html file for the left and right sidebars seperately.

I can show you them individually but cannot show the full site as it is on a private server. Both sidebars work on their individual pages but when they are on the full site together they seem to be interfering with each other.

You can see the individual sidebars here - http://www.3vistasdesign.com/trialsite/tpl_leftpanel_1.php and http://www.3vistasdesign.com/trialsi...ghtpanel_1.php

Is there anythign that would stop both scripts working on the same page?

[inmalagadesign]

hi john thanks for your help we fixed it the both menus were using the same loaders so they were both trying to open at the same time i changed one of them and it works fine now

thanks again for all of your help cheers

tim