jQuery UI problem with nested accordion and tabs widgets (solved)

An application I’m working on features tabs inside a jQuery UI accordion inside yet another set of tabs. The problem I was having was that, for some unknown reason, the accordion became way too high or way to narrow.

It turned out to be logically related to the nesting of the UI widgets and the order in which the widgets were created. If the accordion is rendered before the inner tabs are rendered, the contents of the inner tabs are (still) displayed below each other. The accordion calculates the necessary height based on these vertically stacked elements. Subsequently, the inner tabs are created and a big empty space remains inside the accordion. Another related problem is that when the accordion is created, the actual contents have to be visible for the height calculation to be performed properly. In my case, the accordion is not on the first (outer) tab that is visible by default, but on a subsequent tab, causing the accordion to be rendered with minimum height (approximately 50 pixels) by default.

The final solution was:

1. Create the (inner and outer) tabs

2. Select the outer tab that contains the accordion

3. Create the accordion

4. Re-select the initially selected outer tab.

All logical in retrospect, but isn’t that always the case.


3 Responses to “jQuery UI problem with nested accordion and tabs widgets (solved)”

  1. Matthew Kettlewell Says:

    Do you have a working example of this? I’m running into this exact problem.

    Temporarily I’ve got a fixed height set, but I think that my structure is out of wack.

    Thanks for confirming things..


    • mvantzet Says:

      Hi Matt,

      The code that I ended up with is very application-specific. I’ll try to recap it in a general way.

      Suppose you have tabs, the second tab containing and accordion that in turn contains some tabs. First we create the tabs:

      // First create the tabs
      $('#outerTabs #tab2 #innerTabs').tabs();

      Now suppose tab1 is visible by default, causing tab2 to be hidden. In this case, height calculation for elements in the accordion fails, creating an accordion with a very small height. The workaround is to (temporarily) select tab 2 so that the contents of the accordion become visible, build the accordion, and re-select tab 1.

      $('#outerTabs').tabs('select', 1); // zero-based, i.e. 1 = tab 2
      $('#outerTabs #tab2 .accordion').accordion();
      $('#outerTabs').tabs('select', 0);

      I hope that solves your problem!


  2. Charlie Says:

    You’re the man Mark!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: