jQuery Accordion and Tabs

Question

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.

does the accordion work if its not in the tab ? also can you give just the html for the tabs and accordion — mcgrailm, Mar 29 '11 at 13:13
Please review: http://stackoverflow.com/questions/1542161/jquery-ui-accordions-within-tabs/6796264#6796264 — Brant Messenger, Jul 22 '11 at 21:21

score 1 · Accepted Answer · answered Mar 30 '11 at 14:36

1

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.

answered Mar 30 '11 at 14:36

Echilon

10,064
33
131
217

score 0 · Answer 2 · answered Mar 29 '11 at 13:37

0

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 :)

answered Mar 29 '11 at 13:37

CoolEsh

3,134
1
21
24

But the container doesn't have an explicit height, it should be the available tab height, but as the second tab (with the accordion) is hidden when the page loads, it's invisible. – Echilon Mar 29 '11 at 14:24

jQuery Accordion and Tabs

2 Answers2