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'
.