Accordion append/refresh demo

Even though no panels are active, appending and refreshing causes the newly added panel to expand.

by JC Wren

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div id="accordion">
     <h3>Section 1</h3>

    <div>
        <p>Section 1 content</p>
    </div>
     <h3>Section 2</h3>

    <div>
        <p>Section 2 content</p>
    </div>
     <h3>Section 3</h3>

    <div>
        <p>Section 3 content</p>
    </div>
</div>
<button id="clickme">Add new section</button>

JavaScript

$(function () {
    $("#accordion").accordion({
        collapsible: true,
        active: 'none'
    });
});

$('#clickme').button().click(function () {
    $('#accordion').append('<h3>A new section</h3>');
    $('#accordion').append('<div>New section content</div>');
    $('#accordion').accordion('refresh');
});