Creating inner-accordions into an empty accordion

I have a problem with inner-accordions : the destroy-recreate method to refresh an accordion after adding some panels doesn't work correctly.

When I click on the button in the second accordion it adds a section into it. But the sub-accordion doesn't work (in spite of the desctruction-recreation of the accordion). You can see the code and test it here : http://jsfiddle.net/YL99D/2/

BUT if I modify the HTML code by adding an initial section in the #sections div, it works perfectly when I click the button (Code and demo here : http://jsfiddle.net/YL99D/3/ )

I have also looked at the generated HTML codes using Firebug and I have found something interesting. First look at the code generated when I have put a hard-coded section in the #sections div :

<div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    <div id="sections_new1">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
            <span class="ui-icon ui-icon-triangle-1-s"></span>
            <a href="#" tabindex="-1">Section</a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;">
            Section content :
            <br>
            <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
                <div>
                    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-state-hover" role="tab" aria-expanded="false" aria-selected="false" tabindex="0">
                        <span class="ui-icon ui-icon-triangle-1-e"></span>
                        <a href="#" tabindex="-1">Sub accordion.</a>
                    </h3>
                    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" role="tabpanel" style="display: none;">Sub accordion content</div>
                </div>
            </div>
        </div>
    </div>
</div> 

Now look at the code generated when I let the #sections div empty :

<div id="sections" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
    <div id="sections_new1">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
       开发者_开发技巧     <span class="ui-icon ui-icon-triangle-1-s"></span>
            <a href="#" tabindex="-1">Section</a>
        </h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="display: block;">
            Section content :
            <br>
            <div class="sub-accordions ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">
                <div class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top ui-state-hover" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
                    <span class="ui-icon ui-icon-triangle-1-s"></span>
                    <h3>
                        <a href="#" tabindex="-1">Sub accordion.</a>
                    </h3>
                    <div>Sub accordion content</div>
                </div>
            </div>
        </div>
    </div>
</div> 

The result is that classes are badly set. Do someone have an idea of what is causing this problem ?

[EDIT] : Complete rephrasing

Accordion only updates the css on startup, not when you add something dynamically to it. Your best bet may be to to do something like this when you want to add (or substract) something:

var activeEl = $('#questions').accordion('option','active');

$('#questions').append('<h3><a href="#">foo</a></h3>');
$('#questions').append('<div>bar</div>');

$('#questions').accordion('destroy').accordion({active:activeEl});

Added: Here, btw, is an example fiddle: http://jsfiddle.net/NkVQJ/

EDIT : I have found the source of the problem. Here are the code and demo : http://jsfiddle.net/YL99D/5/

If you have the same problem I've had, take care of creating accordions when they really exist and are not empty. Otherwise it seems it causes many problems. Moreover, I have used objects to store accordions' options, instead of using the method data(). Thus, the accordions seem to react a normal way even after adding HTML elements after the DOM has been loaded.

I have partially found a solution. Instead of defining data related to the selectors, simply define objects which contain the options.

Here are the code and demo : http://jsfiddle.net/YL99D/4/

BUT it does not work when we add a sub-accordion into an existing (not javascript-generated) accordion.

So the problem is still no solved