Image change on accordion click

Hey mvi,

Thank you for the inquiry.

Did you add this script?

jQuery(document).ready(function($) {
    // Replace the accordion selectors with your own accordion toggler selectors
    var accordions = $('#skillspring-process .toggler');

    function forceSlideChange(slideshow, targetIndex) {
        var slides = slideshow.find('.avia-slideshow-inner li');
        var activeSlide = slides.filter('.active-slide');
        var targetSlide = slides.eq(targetIndex);

        // Stop any ongoing animations
        slides.stop(true, true);

        // Hide the current active slide
        activeSlide.removeClass('active-slide').css({ 'opacity': 0, 'visibility': 'hidden' });

        // Show the target slide
        targetSlide.addClass('active-slide').css({ 'opacity': 1, 'visibility': 'visible' });

        // Update the active control dot
        slideshow.find('.avia-slideshow-dots .goto-slide').removeClass('active').eq(targetIndex).addClass('active');
    }

    accordions.on('click', function() {
        // Get the index of the clicked accordion toggler
        var index = accordions.index(this);

        // Replace the slideshow selector with your own slideshow selector
        var slideshow = $('#skillspring-process-slideshow');

        // Check if the slideshow exists on the page
        if (slideshow.length) {
            forceSlideChange(slideshow, index);
        }
    });
});

You should also apply the ID “skillspring-process” to the Accordion element and the ID “skillspring-process-slideshow” to the Easy Slider element.

Best regards,
Ismael

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard