title: help combining jquery functions in one file
body: <p>I'm trying to combine a couple of functions on a single js file. I'm very new to jquery, right now I've got the functions working on separate files, being called on diferent pages (working on drupal), but the strings are so small that I thing it would be best to combine them all in the script.js file.</p>
  
  <p>Here are the functions:</p>
  
  <pre><code>$(document).ready(function() {
      switches = $('#na-paises-list &gt; li');
      slides = $('#na-paises-images &gt; div');
      switches.each(function(idx) {
              this.slide = slides[idx];
          }).click(function(){$(this).addClass('selected'); $(this.slide).unbind();}).hoverIntent(paisesOver,paisesOut);
  });
  
  function paisesOver(){ $(this).addClass('active'); $(this.slide).fadeIn(); }
  function paisesOut(){ switches.removeClass('active'); slides.fadeOut('fast'); }
  </code></pre>
  
  <p>(this one I've found on stack overflow <a href="https://stackoverflow.com/questions/34536/how-do-you-swap-divs-on-mouseover-jquery">here</a> and changed it a bit, maybe this is where I've made a mistake...)</p>
  
  <p>The second one:</p>
  
  <pre><code>$(document).ready(function() {
      $("#na-areas-actividade div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });
  });
  </code></pre>
  
  <p>And the third:</p>
  
  <pre><code>$(document).ready(function() {
      $("#agencias div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });
  });
  </code></pre>
  
  <p>whenever I try to combine either the second or third function with the first one something goes wrong and only one of them works. And I am placing the functions inside the document ready function like this:</p>
  
  <pre><code>$(document).ready(function() {
      switches = $('#na-paises-list &gt; li');
      slides = $('#na-paises-images &gt; div');
      switches.each(function(idx) {
              this.slide = slides[idx];
          }).click(function(){$(this).addClass('selected'); $(this.slide).unbind();}).hoverIntent(paisesOver,paisesOut);
  
  $("#na-areas-actividade div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });
  
  $("#agencias div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });
  
  });
  
  function paisesOver(){ $(this).addClass('active'); $(this.slide).fadeIn(); }
  function paisesOut(){ switches.removeClass('active'); slides.fadeOut('fast'); }
  </code></pre>
  
  <p>Any help or pointer in the right direction for more info about this problem is very welcome.</p>