Change Image on Accordion Tab Click

Hey teamvelocitymarketing,
I used two columns, one with a accordion, the other with a image element and add the custom class to the image element like in the video: toggle-img

then I used this jQuery like in the video:

    jQuery(function() {
const img = "";
  jQuery('p[data-fake-id="#toggle-id-1"]').click(function(){
    jQuery(".toggle-img img").attr('srcset',img);
     jQuery(".toggle-img img").attr('src',img);
  });
});

note I made the adjustment for Enfold ‘p[data-fake-id=”#toggle-id-1″]’ just change #toggle-id-1 to #toggle-id-2 for the second toggle, etc
I used the code block element for the jQuery with the “script” tags:

Please give this a try.

Best regards,
Mike

Hi,

Thank you for the update.

We are seeing a lot of errors in the console, generated from the avia-footer-script file. Please temporarily disable the Enfold > Performance > File Compression settings, then post the login details in the private field so that we can check the modifications further.

Uncaught TypeError: Cannot read properties of undefined (reading 'value')
    at a (avia-footer-scripts-4446f5f720adf5f7e6dda8b47a7ba11b---65ea6d5d939f8.js:123:540)

Best regards,
Ismael

Hi,
I see that you changed the accordion titles from “p” to “h3” in the element options so the script also must reflect this, I adjusted it for you and now it works. please check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike