Conflict with Mootools accordian and Jquery

Question

I am using mootools only for accordion .

script on separate page without any query works fine but the page on which has Jquery is causing lots of issues . I tried various variations but the error persists

<script src="js/mootools-art-0.87.js" type="text/javascript"></script>
    <script src="js/mootools-core-1.4-full.js" type="text/javascript"></script>
    <script src="js/mootools-more-1.4-full.js" type="text/javascript"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/main.js"></script>


     <script type="text/javascript">
         jQuery.noConflict()
         (window.addEvent('domready', function () {
             new Fx.Accordion(jQuery('accordion'), '#accordion h2', '#accordion .content');
         })(jQuery);

    </script>

Error on browser console

Uncaught ReferenceError: Class is not defined mootools-art-0.87.js:182
Uncaught SyntaxError: Unexpected token ; navigation-test.html:30
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Answer 1

Your problem #1 is that mootools-art-0.87.js is loading before core, put that .js file after core and more.

Your problem #2 is that you are using the wrong selector in the Accordion, replace jQuery('accordion') with document.id('accordion').
jQuery('#accordion'), with a # would work but don't mix jQuery there.

And, btw, you might want do do var myAccordion= new Fx.Accordion( //etc just so you can call it later if needed.