Using 2 javascript tools (accordion and a slider) break when put on same page.

[dalearyous]

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript" src="acc/mootools-core-1.4.3-compat.js"></script>
<script type="text/javascript" src="acc/mootools-more-1.4.0.1-compat.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").easySlider({
			auto: true, 
			continuous: true
		});
	});	
</script>
<script type='text/javascript'>//<![CDATA[ 
window.addEvent('domready', function(){
    new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .content');
});
//]]>  
</script>

any idea why and how i can fix this? if i separate them both (put 1 on one html page and 1 on another for testing) they both work just fine

 

[beginner99]

No idea but do you need to sue these tools? JQuery UI has an accordion and a slider and he both do work.

 

[dalearyous]

i would like a slider and an accordion on the same page

ideas?

 

[sourceninja]

try one of these

http://jqueryui.com/

http://twitter.github.com/bootstrap/

 

[Markbnj]

When you put them on separate pages for testing are you also removing the unnecessary external script references? I'm just wondering if the scripts aren't colliding with each other somehow. You might also try putting the slider into the 'domready' event, or the accordion into the 'document.ready' event, so that you only have one event firing when the dom is built.

 

[beginner99]

Also using 2 JavaScript libraries (Query and mootools9 might nto be the best idea too. Just asking for problems. decide on one and then choose the according widgets for that library.

 

[GregGreen]

When you put them on separate pages for testing are you also removing the unnecessary external script references? I'm just wondering if the scripts aren't colliding with each other somehow. You might also try putting the slider into the 'domready' event, or the accordion into the 'document.ready' event, so that you only have one event firing when the dom is built.

Mootools and jQuery definitely are colliding. They both try and use $ which just isn't going to work. To fix you can either google how to use jQuery.noconflict() or switch all your references to $ in your jQuery plugin and the specific stuff inside your <script> tag that calls the jQuery plugin (NOT the actual jQuery file) to jQuery instead of $.

I was going to post this the other day, but it made even less sense then when I wrote something similar. I was really hoping someone would step up.