JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<div id="accordion">
    <h3>Section 1</h3>
    <div>Text 1</div>
    <h3>Section 2</h3>
    <div></div>
    <h3>Section 3</h3>
    <div></div>
</div>

JavaScript

//create accordion with collapsible=true and active=false, which allows the accordion to load completely closed. when a panel is activated, display the heading
$( '#accordion' ).accordion({collapsible:true, active: false,activate: function(event, ui){alert(ui.newHeader[0].textContent)}});

//new panel is added to the accordion
$( "<h3>New Panel</h3>" ).appendTo( "#accordion" );
$( "<div>jQuery UI sure is awesome!</div>" ).appendTo( "#accordion" );

//refresh the accordion to render the new panel (but not open it)
$('#accordion').accordion("refresh");
//at this point, bug is triggered during the 'refresh', and the 'activate' event fires on the first panel