What steps will reproduce the problem?
1. Open a page via ajax inside of a nyroModal that contains a jquery
Accordion object
What is the expected output? What do you see instead?
Seeing one tab of accordion content at load time then after clicking on any
accordion header all content except the headers disappears, rather than
proper accordion behavior.
What version of the product are you using? On what operating system?
nyroModal 1.3.0, jquery 1.2.6, jquery.ui 1.6rc2 (also exhibits the same
behavior on jquery.ui 1.5.2), firefox 2/3 or ie7
Please provide any additional information below.
Simple example of what I am describing can be found at:
http://cypheric.com/modal-issue/index.html
The page is loading accordion.html which contains the jquery demo usage of
an accordion that works correctly on its own. When you click the link on
the index.html page, the modal functions correctly but the accordion
exhibits the behavior described above.
The problem with the UI plugins is they need to be visible to work correctly. What's going on your example is that the enabling of the accordion occurs just after the endFillContent callback. At this time, the content isn't shown at all. that's why is totally displaying wrong. The good place to enable your accordion will be in the endShowContent callback. But you probably want to keep your accordion call on your accordion.html page. Here is my solution which I tested: - Remove the nyroModal class on your link. - Replace $("#clickme").nyroModal(); by : $("#clickme").nyroModal({ endShowContent: function(elts, settings) { // Destroy and recreate the accordion $("#example", elts.content).accordion('destroy').accordion(); } }); And it'll work. i also noticed that you include the nyroModal.css in your accordion.html. This css should be included in the opener page (index.html in your case) Maybe I can work on something with the rel script tag to determine when should be executed the script (endFillContent or endShowContent). Do you think it will be helpful?