javascript - Refresh child in dynamically created nested accordion -

i trying append items nested accordion dynamically when user clicks button. using following code create nested accordion:

  $(".accordion").accordion({   collapsible: true,    autoheight: false,    animated: 'swing',   heightstyle: "content",   changestart: function(event, ui) {       child.accordion("activate", false);   } });  var child = $(".child-accordion").accordion({   active:false,   collapsible: true,    autoheight: false,   animated: 'swing' }); 

in order this, have found need refresh accordion using following:

$('.accordion').accordion("refresh"); 

my problem when try refresh inner accordion using:

$('.child-accordion').accordion("refresh"); 

i following: error: cannot call methods on accordion prior initialization; attempted call method 'refresh'

when inspect div should refreshed has following ids/classes:

div#shelf0sections.child-accordion.ui-accordion-content.ui-helper-reset.ui-... 

i tried using selector:

$('#shelf0sections .child-accordion').accordion("refresh");  

instead doesn't give error, nothing happens visually.

jsfiddle: http://jsfiddle.net/mw9sa/3/ (note first element in list example see nested accordion working, if try add sections it, won't work. use '+shelf' button, open new accordion , use '+section' button.)

how more modular approach?

fiddle or didnt happen: http://jsfiddle.net/varinder/24hsd/1/

explanation

the idea ( same ) create brand new accordion element on fly correct events attached , appended somewhere in dom.

it's generaly more managable have repeater html markup abstracted away in template somewhere in dom , use js reference rather building string.

heres accordion template in markup:

<div class="template">     <div class="accordion">         <h3 class="accordion-title">accordion title</h3>         <div class="accordion-content">             accordion content         </div>     </div> </div> 

heres full html markup - in case:

<div class="page"> </div>  <div id="addshelf" class="button">+ shelf</div> <div id="addsection" class="button">+ section</div>  <div class="template">     <div class="accordion">         <h3 class="accordion-title">accordion title</h3>         <div class="accordion-content">             accordion content         </div>     </div> </div> 

js

starting off storing different accordion configurations:

var shelfconfig = {     collapsible: true,      autoheight: false,      animated: "swing",     heightstyle: "content" }  var shelfsectionconfig = {     active:false,     collapsible: true,      autoheight: false,     animated: "swing" } 

kepping track of current accordion number , current accordion section number ( number of sections inside last accordion ) - might come in handy if require feature remove accordion shelf

var currentshelfnumber = 0; var currentshelfsectionnumber = 0; 

chaching dom elements, notice reference tempalte div

var $page = $(".page"); var $accordiontemplate = $(".template").children();  var $addsection = $("#addsection"); var $addshelf = $("#addshelf"); 

creating helper function returns cloned copy of accordion template dom

function getaccordiontemplate() {      return $accordiontemplate.clone();    } 

main function generateaccordion - takes 2 arguments, accordionnumber append current number in titles etc , accordiontype find out accordion configuration use.

with parameters return brand-spanking-new accordion appropriate events attached can append dom

function generateaccordion( number, accordiontype ) {     var $accordion = getaccordiontemplate();     var accordiontitle = "twerking bieber?";      if ( accordiontype == "shelf" ) {         accordiontitle = "shelf " + number;         } else {          accordiontitle = "shelf section";     }      $accordion.find("h3").text( accordiontitle );      var $accordionwithevents = attachaccordionevents( $accordion, accordiontype );      return $accordionwithevents; } 

notice call function attachaccordionevents name suggests - fella attach events accordion element.

function attachaccordionevents( $accordionelement, accordiontype ) {     if ( accordiontype == "shelf" ) {         $accordionelement.accordion( shelfconfig );     } else {         $accordionelement.accordion( shelfsectionconfig );         }      return $accordionelement; } 

another helper function makes sure "add section" button doesnt show if there no accordion shelf work on

function managesectionbutton() {     if ( $page.children().length > 0 ) {         $addsection.show();     } else {         $addsection.hide();     } } 

finaly events , logic:

$addshelf.on("click", function(e) {     e.preventdefault();      var newshelfnumber = currentshelfnumber + 1;     var $shelfelement = generateaccordion( newshelfnumber, "shelf" );      currentshelfnumber = newshelfnumber;      $page.append( $shelfelement );       managesectionbutton(); });  $addsection.on("click", function(e) {     e.preventdefault();      var newshelfsectionnumber = currentshelfsectionnumber + 1;     var $shelfsectionelement = generateaccordion( newshelfsectionnumber, "section" );     var $activeshelfelement = $page.children().last().find(".accordion-content");      $activeshelfelement.append( $shelfsectionelement ); }); 

... , thats it.

hope helps,

cheers