jquery - How can I updateSize for CarouFredsel when inside of an accordion? -

i'm using jquery accordion hide/show content. when content expended in accordion - carousel hidden (the carousel shown expected if accordion set open default).

my issue seems similar 1 in regards tabs:

carofredsel , jquery ui tabs elements hidden

i have tried apply suggestion within accordion call, not work (the carousel still not show/resize when accordion expands/opens):

$( ".dnd-accordion" ).accordion({     collapsible: true,     active: true,     heightstyle: "content",     create: function( event, ui ) {         var expanded = $(this).data("expanded");         if(expanded===0){             expanded = true;         }         else{             expanded = expanded-1;         }         $(this).accordion( "option", "active", expanded);     },     $(this).click(function () {         $('.dnd-carousel').trigger('updatesizes');     },   }); 

and i've tried well, same thing, doesn't work:

$(".dnd-accordion .accordion-heading").click(function () {     $('.dnd-carousel').trigger('updatesizes'); });  

any ideas i'm doing wrong, or if there more correct solution?

edit:

here html -

<div class="dnd-accordion dnd-toggle" data-expanded="0">     <!-- ... accordion toggle content ...  -->      <div class="dnd-accordion-body">         <div class="dnd_container">             <!-- ... accordion body content ...  -->              <div class="dnd-carousel" data-autoplay="1" data-items="1" data-effect="scroll" data-easing="linear" data-duration="500">                 <ul>                     <li><img src="<!-- /path/to/image/ -->" alt=""></li>                     <li><img src="<!-- /path/to/image/ -->" alt=""></li>                     <li><img src="<!-- /path/to/image/ -->" alt=""></li>                     <li><img src="<!-- /path/to/image/ -->" alt=""></li>                     <li><img src="<!-- /path/to/image/ -->" alt=""></li>                     <li><img src="<!-- /path/to/image/ -->" alt=""></li>                     <li><img src="<!-- /path/to/image/ -->" alt=""></li>                     <li><img src="<!-- /path/to/image/ -->" alt=""></li>                     <li><img src="<!-- /path/to/image/ -->" alt=""></li>                 </ul>             </div><!-- [end] .dnd-carousel -->          </div><!-- [end] .dnd_container -->     </div><!-- [end] .dnd-accordion-body -->  </div><!-- [end] .dnd-accordion --> 

i'm not sure if work 100%, had similar problem, , did trick

$(".dnd-accordion").on('click', '.accordion-heading', function () {     $('.dnd-carousel').find('ul').trigger('updatesizes'); }); 

now part that's worrying me '.accordion-heading', if doesn't work try '.ui-accordion-header'.