Nesting CJui Widgets

Hey, I’m working on a project where I render a CJuiAccordion inside a CJuiTabs widget.

Unfortunately, I can’t get the accordion to work - as soon as I copy and past the code outside the CJuiTabs widget, it works; but when it is inside the CJuiTabs widget, it stops working again.

I searched the forums and documentation, and couldn’t find anything about why this might be. Does anybody know a workaround for this?


Still on-topic but probably of no use for your problem, I nested a CJuiDatePicker inside a CJuiAccordion (which in turn is nested inside a CActiveForm). So far everything seems to work.

One thing that comes to my mind: I think you should investigate if a different set of tags, that the widgets use for navigation, could help you out. Documentation for CJuiAccordion header option:

(Perhaps you could examine the generated code to determine if both widgets use the same tags.)

(not tested)


Hmm, I tried switching the id’s of the divs (as both had an id of “yw0”, which would cause problems anyway), but nothing happened. When I look at the page source, there isn’t even jQuery code being generated for the accordion; the jQuery code for the tabs is there, but nothing about the accordion at all, so it looks like the problem is somewhere inside Yii as it renders the widget.

I’ll keep digging around, if anybody has ideas or inspiration let me know! This seems like a pretty basic functionality that should be in the framework…


I know this is an old post, but I’ve struggled with this exact same issue.

I’m not sure if our scenarios are the same, but my tab content gets loaded via an AJAX request to a action in my controller which just does a renderPartial, and pulls some data according to the request being made. So every tab renders the same partial, which then displays different data depending on the tab selected.

What happened with me, was that when switching tabs, the accordion never initialized, i.e. all the content was there, although no nice accordion. The problem was, that when switching tabs, the content of the previous tab doesn’t get erased, only replaced when switching back to that tab, but with the same partial rendering an accordion without a unique id set in the properties array, you get an HTML id conflict, as stated in the last post.

Easy solution, just give every widget you load on a page a unique id, and there shouldn’t be any problems.

Also, remember with renderPartial to specify the fourth and last parameter as true, so Yii will process any additional client side script/styles (if I understand correctly) and load them correctly.