jQuery Accordion and Tabs

I'm trying to get a jQueryUI accordion working inside jQueryUI tabs. I'开发者_开发百科ve read of people having problems and have found several posts which have reported success from initializing the accordion inside the tabs' 'show' event, but when I try this I just get what looks like two half-styled tab headers and no accordion functionality. I have the following in my page load event:

$().ready(function() {  
   tabs = $('.jqTabsStandard').tabs({
        show: function(ev, ui) {
            $('.ingredientsAccordion').accordion({
              autoHeight: true,
                header: 'h3 a'
            });
        } 
    });
});

The page is here - click the edit (pencil) button for a recipe, then click the ingredients tab.

The solution was as simple as changing the order in which the UI is loaded. First initialize the accordion, the the tabs, that way the accordion has height and is not invisible.

I check it with developer tools in Chrome: your accordion data containers is ok but has 1px height. That's why you see almost nothing. Try to change height of tabs container, because when accordion initiates on tab that fit content then accordion actually has no space for sliding. I am sorry for bad english :)