Integrate a jQuery function into another in Tabs UI

Question

I'm trying to integrate one function into another function and am puzzled.

What I'm trying to do is add a jQuery function that will call a random quote, and I want that function to fire on a tab change in jQuery Tabs UI.

This is the random quote function:

$.get('quotes.txt', function(data) {
        var quotes = data.split("\@");
        var idx = Math.floor(quotes.length * Math.random());
        $('.quotes').html(quotes[idx]);
    });

And below this is the tabs init (along with another function that collapses divs when a tab is changed):

$(document).ready(function() { 
    var $tabs= $("#tabs").tabs({
        fx : { 
            opacity: 'toggle' 
        },
        select : function(event, ui) {
            $(".entry-content").hide();                
        }                  //I assume it goes near here, but no luck
    }); 
});

Does the quotes function need to have the variables called first?

And, how would it work to make the quote div also use the fx opacity effect when it changes quotes?

Edit 4/27/11

This works and uses the fx effect in the function:

$(document).ready(function () {
    var $tabs = $("#tabs").tabs({

        fx: {
            opacity: 'toggle'
        },

        select: function (event, ui) {
            $(".entry-content").hide();

            $('div#quotescontainer').load('quotes.html', function () {
                var $quotes = $(this).find('div.quote');
                var n = $quotes.length;
                var random = Math.floor(Math.random() * n);
                $quotes.hide().eq(random).fadeIn();
            });
        }
    });
});

Answer 1

The code should go inside the curly braces

$(document).ready(function() { 
    var $tabs= $("#tabs").tabs({
        fx : { 
            opacity: 'toggle' 
        },
        select : function(event, ui) {
            $(".entry-content").hide();                
            // <-- code goes here
        }                  //I assume it goes near here, but no luck <-- NO!
    }); 
});

Personally, I'd put it in the 'show' event of the tab, but that shouldn't be a problem.

I've setup a fiddle with some test code for you to see how it should be : http://jsfiddle.net/PyN5Y/1/

$( "#tabs" ).tabs({
    select: function(event, ui) {
        alert('triggered on select');
        doStuff();    
    },
    show: function(event, ui) {
        alert('triggered on show');
        doStuff();
    }
});

function doStuff() {
    alert('doing stuff');
}