slideshow - js.cycle.js and jquery.js conflict -

i new javascript , jquery. want design website contains both accordion navigation , slideshow on same page. in order this, downloaded auto scrolling slideshow plugin htmldrive.net:

http://www.htmldrive.net/items/show/110/auto-scrolling-slideshow-tabs-jquery-

(this plugin links "ajax.googleapis" remotely. makes use of "jquery.cycle.js" plugin, , main javascript located in "slideshow.js".)

and accordion plugin, htmldrive.net:

the other plugin on htmldrive. it's called "making-accordions-with-the-tabsjquery (i can't supply 2nd link in post dont have reputation of 10 haha)

(this plugin makes use of jquery.js plugin. has inline javascript in html)

i have managed these 2 plugins working on separate pages, problem running seem cause conflicts when both put on same page. conflict seems come linking jquery.js , jquery.cycle.js files same page. interestingly, changing order in link them gives different errors.

the errors when linking both of these .js files same page are:

1.

typeerror: jquery("div.slides > ul", jqueryslideshow.context).cycle not function

(this happens when link jquery.js plugin after have linked jquery.cycle.js plugin)

2.

typeerror: jquery.tools undefined

typeerror: jquery("#accordion").tabs not function

(this happens when link jquery.cycle.js plugin after have linked jquery.js plugin)

to me seems browser loads first .js file , forgets functions in file when loads second .js file. know there $.noconflict(); code apparently supposed such conflicts doesn't seem work here.

the slideshow.js code follows:

$slideshow = { context: false, tabs: false, timeout: 1000,      // time before next slide appears (in ms) slidespeed: 1000,   // time takes slide in each slide (in ms) tabspeed: 300,      // time takes slide in each slide (in ms) when clicking through tabs fx: 'scrollleft',   // slide effect use  init: function() {     // set context speed selectors/improve performance     this.context = $('#slideshow');      // set tabs current hard coded navigation items     this.tabs = $('ul.slides-nav li', this.context);      // remove hard coded navigation items dom      // because aren't hooked jquery cycle     this.tabs.remove();      // prepare slideshow , jquery cycle tabs     this.prepareslideshow(); },  prepareslideshow: function() {     // initialise jquery cycle plugin -     // information on options set below go to:      // http://malsup.com/jquery/cycle/options.html     $('div.slides > ul', $slideshow.context).cycle({         fx: $slideshow.fx,         timeout: $slideshow.timeout,         speed: $slideshow.slidespeed,         fastonevent: $slideshow.tabspeed,         pager: $('ul.slides-nav', $slideshow.context),         pageranchorbuilder: $slideshow.preparetabs,         before: $slideshow.activatetab,         pauseonpagerhover: true,         pause: true     });             },  preparetabs: function(i, slide) {     // return markup hardcoded tabs use jquery cycle tabs     // (attaches necessary jquery cycle events tabs)     return $slideshow.tabs.eq(i); },  activatetab: function(currentslide, nextslide) {     // active tab     var activetab = $('a[href="#' + nextslide.id + '"]', $slideshow.context);      // if there active tab     if(activetab.length) {         // remove active styling other tabs         $slideshow.tabs.removeclass('on');          // add active styling active button         activetab.parent().addclass('on');     }             }             };   $(function() { // add 'js' class body $('body').addclass('js');  // initialise slideshow when dom ready $slideshow.init(); });  

the inline javascript accordion looks follows:

 <script> jquery(function() {   jquery("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialindex:     null}); }); </script>    <!-- activate tabs javascript --> <script>  // add new effect tabs jquery.tools.tabs.addeffect("slide", function(i, done) {  // 1. upon hiding, active pane has ruby background color this.getpanes().slideup().css({backgroundcolor: "#2c2c2c"});  // 2. after pane revealed, background set original color (transparent) this.getpanes().eq(i).slidedown(function()  {     jquery(this).css({backgroundcolor: 'transparent'});      // supplied callback must called after effect has finished job     done.call(); }); }); </script> 

any appreciated stuck here.

on other hand, being beginner, making way more complicated should. if can give me way of having accordion , slideshow on same page, appreciate it.