title: js.cycle.js and jquery.js conflict
body: <p>I am new to javaScript and Jquery. I want to design a website that contains both an accordion navigation and a slideshow on the same page. In order to do this, I downloaded this auto scrolling slideshow plugin from htmldrive.net:</p>
  
  <p><a href="http://www.htmldrive.net/items/show/110/Auto-Scrolling-Slideshow-Tabs-jQuery-" rel="nofollow">http://www.htmldrive.net/items/show/110/Auto-Scrolling-Slideshow-Tabs-jQuery-</a> </p>
  
  <p>(This plugin links to "ajax.googleapis" remotely. It makes use of the "jquery.cycle.js" plugin, and finally the main javascript is located in "slideshow.js".)</p>
  
  <p>and this accordion plugin, also from htmldrive.net:</p>
  
  <p>The other plugin is also on htmldrive. It's called "Making-accordions-with-the-Tabsjquery (I can't supply a 2nd link in this post as I dont have a reputation of 10 haha) </p>
  
  <p>(This plugin makes use of the jquery.js plugin. It also has inline javascript in the html)</p>
  
  <p>I have managed to get these 2 plugins working on separate pages, the problem I am running into is they seem to cause conflicts when they are both put on the same page. The conflict seems to come from linking the jquery.js and jquery.cycle.js files to the same page. Interestingly, changing the order in which I link them gives different errors.</p>
  
  <p>The errors I get when linking both of these .js files to the same page are:</p>
  
  <p>1.</p>
  
  <p>TypeError: jQuery("div.slides > ul", jQueryslideshow.context).cycle is not a function</p>
  
  <p>(This happens when I link the jquery.js plugin AFTER I have linked the jquery.cycle.js plugin)</p>
  
  <p>2.</p>
  
  <p>TypeError: jQuery.tools is undefined</p>
  
  <p>TypeError: jQuery("#accordion").tabs is not a function</p>
  
  <p>(This happens when I link the jquery.cycle.js plugin AFTER I have linked the jquery.js plugin)</p>
  
  <p>To me it seems like the browser loads the first .js file and then forgets the functions in this file when it loads the second .js file. I know there is the $.noConflict(); code that apparently is supposed to help with such conflicts but it doesn't seem to work here.</p>
  
  <p>The slideshow.js code is as follows:</p>
  
  <pre><code>$slideshow = {
  context: false,
  tabs: false,
  timeout: 1000,      // time before next slide appears (in ms)
  slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
  tabSpeed: 300,      // time it takes to slide in each slide (in ms) when clicking through tabs
  fx: 'scrollLeft',   // the slide effect to use
  
  init: function() {
      // set the context to help speed up selectors/improve performance
      this.context = $('#slideshow');
  
      // set tabs to current hard coded navigation items
      this.tabs = $('ul.slides-nav li', this.context);
  
      // remove hard coded navigation items from DOM 
      // because they aren't hooked up to jQuery cycle
      this.tabs.remove();
  
      // prepare slideshow and jQuery cycle tabs
      this.prepareSlideshow();
  },
  
  prepareSlideshow: function() {
      // initialise the jquery cycle plugin -
      // for information on the options set below go to: 
      // http://malsup.com/jquery/cycle/options.html
      $('div.slides &gt; 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 from hardcoded tabs for use as jQuery cycle tabs
      // (attaches necessary jQuery cycle events to tabs)
      return $slideshow.tabs.eq(i);
  },
  
  activateTab: function(currentSlide, nextSlide) {
      // get the active tab
      var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
  
      // if there is an active tab
      if(activeTab.length) {
          // remove active styling from all other tabs
          $slideshow.tabs.removeClass('on');
  
          // add active styling to active button
          activeTab.parent().addClass('on');
      }            
  }            
  };
  
  
  $(function() {
  // add a 'js' class to the body
  $('body').addClass('js');
  
  // initialise the slideshow when the DOM is ready
  $slideshow.init();
  }); 
  </code></pre>
  
  <p>The inline javaScript for the accordion looks as follows:</p>
  
  <pre><code> &lt;script&gt;
  jQuery(function() { 
  
  jQuery("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex:     null});
  });
  &lt;/script&gt;
  
  
  
  &lt;!-- activate tabs with JavaScript --&gt;
  &lt;script&gt;
  
  // add new effect to the tabs
  jQuery.tools.tabs.addEffect("slide", function(i, done) {
  
  // 1. upon hiding, the active pane has a ruby background color
  this.getPanes().slideUp().css({backgroundColor: "#2c2c2c"});
  
  // 2. after a pane is revealed, its background is set to its original color (transparent)
  this.getPanes().eq(i).slideDown(function()  {
      jQuery(this).css({backgroundColor: 'transparent'});
  
      // the supplied callback must be called after the effect has finished its job
      done.call();
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help would really be appreciated as I am really stuck here.</p>
  
  <p>On the other hand, being a beginner, I am probably making this way more complicated than I should. So If anyone can give me a good way of having an accordion AND a slideshow on the same page, I would really appreciate it.</p>