[jQuery] scrollable in tab panes

[brainquidditch]

I am new to jQuery. I successfully implemented a set of tabs under a
banner on a web page. Now I would like to add a scrollable inside one
of the tab panes ("home_content" below). The code is very simple.

$(document).ready( function()
{
        // Load Home
        loadBanner();  // this works
        loadTabs();   // this works
        loadHomePanel();   // this doesn't work

        // setup ul.tabs to work as tabs for each div directly under
div.panes
        $("ul.tabs").tabs("div.panes > div");

        // initialize scrollable
        $(".scrollable").scrollable( { vertical:true, size: 3 });
});

Here is one element in the tab panes div:

<div class="panes">
        <div class="home_content"></div>
        ....
</div>

I added this function:

function loadHomePanel()
{
var text = '<div class="scrollable"> \
        <div class="items"> \
                <div id="item_1"><img src="images/GCLInstallation.jpg" /></div> 
 \
                <div id="item_2"><img src="images/MPBInstallation.jpg" /></div> 
\
        </div> \
</div>';

$('.home_content').html( text );
}

Why doesn't this work? and what should be done differently?

Thanks.