How to append additional html to a jQuery UI Tab Panel?

Question

I want to implement a "show more" paginator inside of a jQuery tab panel. If the user clicks the "show more" link, I want to load more elements and append them to the existing contents of the tab panel.

I'm hoping there is some way to access the "ui" element that is available in the standard event callbacks. Something like this...

var tabPanel = $('#myTabsElement').tabs().ui.panel; 
moreElements.appendTo(tabPanel);

Is there an easy way to access this object?

Answer 1

To access the <div> containing a tab's contents, use the standard jQuery selector function. See http://jqueryui.com/demos/tabs/ for an example of tabs in action. Using that example, you might use the following code to append to the "panel" of the third tab:

var tabPanel = $('tabs-3');
moreElements.appendTo(tabPanel);