Question

I’m using jQuery UI accordion for the first time and I think I’m missing something here. I wrote the following code:

    <div id="theAccordion">
        <h2><a href="#">Header1</a></h2>
        <div>old content 1</div>
        <h2><a href="#">Header2</a></h2>
        <div>old content 2</div>
        <h2><a href="#">Header3</a></h2>
        <div>old content 3</div>
        <h2><a href="#">Header4</a></h2>
        <div>old content 4</div>
        <h2><a href="#">Header5</a></h2>
        <div>old content 5</div>
    </div>
<script type="text/javascript">
    var map = {
        Header1: function(jqObj) { jqObj.append("<p>new content 1</p>"); },
        Header2: function(jqObj) { jqObj.append("<p>new content 2</p>"); },
        Header3: function(jqObj) { jqObj.append("<p>new content 3</p>"); },
        Header4: function(jqObj) { jqObj.append("<p>new content 4</p>"); },
        Header5: function(jqObj) { jqObj.append("<p>new content 5</p>"); }
    };
    function accordionChange(event, ui) {
        ui.newContent.empty();
        eval("map." + ui.newHeader.text() + "(ui.newContent)");
    }
    $(function() {
        $("#theAccordion").accordion({
            change: function(event, ui) { accordionChange(event, ui); }
        });
    });
</script>

The code works as expected, it fires the map functions but no code is appended to the accordion content because the newContent object seems to be empty all the time.
I was debugging it with IE8 debugging tools and jqObj.length is zero so no change is made in the newcontent.
do you have an idea of what’s going on here?

Thanks in advance

Answer 1

Actually — you had trouble because there’s a bug in the accordion widget. I made a patch just now: http://dev.jqueryui.com/ticket/4469#comment:4