Accordion Troubles

[Quark]

Hi Elementor Community!

my problem:
I use the Accordion Widget from Elementor (Pro Version) and templates inside to generate the content.
There is a media carousel in each content (in each tab from accordion). But the carousel only displayed correctly in the first tab.
– no more in the second tab (and in the further tabs).
As soon as I change the page size a bit, everything fits again. Same in the mobile version.

Is that a «cache» problem?
Can I force a «resize/refresh»?
Or can i set the non-visible area inactive?

Found this code.elementor.com/js-hooks/ and tried with js – but yes, my skills are not good enough, arrgh.

Thanks for any help or solution/Tipp!

The side where the problem is: roi.fabianroos.ch
(Site is under construction)

Thanks!

 

[Quark]

the solution is:
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('.elementor-accordion-item').on('click', function () {
const imageCarousel = $( this ).find('.swiper-container'),
swiperInstance = imageCarousel.data( 'swiper' );
swiperInstance.update();
});
});
</script>

 

[Kinpatsu]

Hi there, I'm having the same issue but with a video widget in a nested accordion. Do you by chance know what the js hook would be to fix a video widget?

 

[Kinpatsu]

Thanks to a coworker we were able to solve this. This is the solution to the problem in the case of a nested video player instead of an image carousel

<script type="text/javascript">
jQuery(document).ready(function ($) {
$('.elementor-accordion-item').on('click', function () {
twentytwenty.intrinsicRatioVideos.makeFit();
});
});
</script>

 

[Quark]