By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Accordion Troubles

Q

Quark

New Member
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!
 
Q

Quark

New Member
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>
 
K

Kinpatsu

New Member
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?
 
K

Kinpatsu

New Member
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>
 

Latest posts

Latest Resources

Other Elementor Resources

elementor official
Top