help combining jquery functions in one file

Question

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.

Here are the functions:

$(document).ready(function() {
    switches = $('#na-paises-list > li');
    slides = $('#na-paises-images > 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'); }

(this one I've found on stack overflow here and changed it a bit, maybe this is where I've made a mistake...)

The second one:

$(document).ready(function() {
    $("#na-areas-actividade div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });
});

And the third:

$(document).ready(function() {
    $("#agencias div").tabs({ fx: { opacity: 'toggle', duration: 'fast' }, cookie: { expires: 30 } });
});

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:

$(document).ready(function() {
    switches = $('#na-paises-list > li');
    slides = $('#na-paises-images > 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'); }

Any help or pointer in the right direction for more info about this problem is very welcome.

Answer 1

I managed to get your code working fine (nearly) unmodified. A couple things.

1. hoverIntent is not a jQuery method or event handler. I changed this to hover.
2. Make sure you are linking to the jQuery cookie plugin if you want to use the cookie option on the tabs widget. I didn't want to go find the plugin, so I just removed the option.

---

$(document).ready(function() {

    switches = $('#na-paises-list > li');
    slides = $('#na-paises-images > div');

    switches.each(function(idx) {
        this.slide = slides[idx];
    }).click(function(){
        $(this).addClass('selected'); 
        $(this.slide).unbind();
    }).hover(paisesOver,paisesOut); 

    $("#na-areas-actividade div").tabs({ 
        fx: { 
            opacity: 'toggle', 
            duration: 'fast' 
        }});

    $("#agencias div").tabs({
        fx: {
            opacity: 'toggle', 
            duration: 'fast' 
        }});    
});

function paisesOver() { 
    $(this).addClass('active');
    $(this.slide).fadeIn();
}

function paisesOut() { 
    switches.removeClass('active'); 
    slides.fadeOut('fast'); 
}

Answer 2

Finishing up...

The code sixthgear provided was clean of other plugins and working fine. When I added hoverIntent and cookie it broke again. Therefor something was wrong with those functions.

Since I am trying to reduce the size of the page, by only adding the different plugins needed on specific pages, it' makes sence to mantain this functions also on separate files.

To group everything together would make it necessary to load hoverIntent and Cookie on every page, since from what I understand you can't parse undeclared functions, is this statement correct?

This was my first question on stackoverflow, next time I'll be more explicit! Thank you very much!