javascript - When adding a jQuery Accordion element, need new element to default open -

i have accordion i'm dynamically creating new elements. however, when cannot seem newest element default open. it's first element.

ideas?

here's html:

    <asp:multiview id="mainview" runat="server">         <asp:view id="view1" runat="server">             <table style="width: 100%; border-width: 3px; border-color: #c4f691; border-style: solid">                 <tr>                     <td>                         <div class="rowclassspace">                             &nbsp;</div>                         <div id="accordion">                             <a href="#">make/model (insured vehicle)</a>                                 <div>                                     <p>                                         content                                     </p>                                 </div>                         </div>                         <div>                             <button id="addaccordion">                                 add vehicle</button>                             </div>                     </td>                 </tr>             </table>         </asp:view>     </asp:multiview> 

here's js:

    //  initialize accordion     $(document).ready(function () {         $(function () {         $("#accordion").accordion();         });      });      //  adding according sections     $('#addaccordion').click(function () {     });      function addaccordion() {        var active = $('#accordion').accordion('option', 'active');        $('#accordion').append('<a href="#">make/model (other car #)</a><div><p>new data</p></div>').accordion('destroy').accordion({ active: active});        } 

suggest using destroy method destroy existing, append new section, initialize new accordion instance. markup using seems strange using <a> tags

by counting existing sections can set active index number of sections before new 1 added newest section added opened

var template=function(ctr){    /* using html markup per docs*/     return '<h3>section '+ctr+'</h3><div>content '+ctr+'</div>'; };  var accordoptions={     collapsible:true,     active:0 }; var $accord=$('#accordion').accordion(accordoptions);  $('button').click(  addsection);  function addsection(){     var num_sections=$accord.children('h3').length;     /* set active index number of current sections*/     accordoptions.active=num_sections;     $accord.accordion('destroy')             .append( template( num_sections +1 ) )             .accordion( accordoptions); } 

demo: http://jsfiddle.net/hnvqd/