Change image on accordion tab click in Elementor Pro

Learn how to change an image whenever a user opens an accordion.
Source Code:
urielsoto.com/...
🟢 Email Technical Support:
urieljsoto.gum...
🔵 Video Call Technical Support:
urieljsoto.gum...
🔴 Download My Custom Templates:
urieljsoto.gum...
🔵 Join Our Facebook Community!
bit.ly/urielsot...
🟢 Hire Me:
urielsoto.com/...
🟢 My Web Agency:
vluxdesigns.com/
PRODUCTS I USE FOR MY WEBSITES:
🔴 Get Elementor Pro - My Favorite Page Builder
bit.ly/urielele...
CONTACT ME:
My Website: urielsoto.com/​
Facebook: / urielsotodev
Linkedin: / uriel-soto-976b3117a

[@oOKiniaKissOo]

Omg I was fighting with chat gpt and copilot all day to tell me how to do it and they FAILED. I can't believe I didn't search on youtube earlier. with your video I did it in 10 minutes it wasn't even difficult. YT is always filled with heroes like you who don't wear capes 😂 You saved me thank you!!

[@dannymichael9793]

Can you share your modified jQuery code?

[@LytboxStudio]

I dig this method for the switching images. Another good one! Cheers!

[@UrielSoto]

Thanks man! Nice to see you here

[@dzakiahsana6]

@@UrielSoto Hii, i have problem. I use advanced accordion from essential addon cause need customize the content with save template. But this accordion nothing number like #elemenotor-tab-3435 do u have idea for this?

[@anupamajosh]

Great video. I was looking for this and found it. Thanks for your amazing content. Keep them coming!!!

[@combinedcreative]

I noticed that Elementor changed its tags so now had to use "#e-n-accordion-item-" and it works perfectly. However is there any way to get a smooth fadeIn of the image after you click?

[@WickyDesign]

Nice! Thanks for sharing this Elementor trick!

[@UrielSoto]

Got you!

[@shreyankputhran2396]

Thank you for helping people who don't use Pro.

[@mageshraja4187]

Great & Easy Method, Thank You, Uriel Soto :)

[@matheuss1810]

Muito obrigado, salvou um brasileiro😀

[@gracegroenewald]

Thanks, just what I was looking for!

[@DeanneBawar]

Very HELPFUL!! THANK YOUU!

[@potokipaul]

thank you, this worked perfectly

[@aryahmdm]

is there any css to make the image fade in/out whenever we switch between image? This is a great tutorial btw, thank you!

[@zamilahamed]

After this line: jQuery(".toggle-img img").attr('src',img) Add this code: .animate({opacity: '0'}).animate({ opacity: '1'});

[@viniciuspalu]

Hi thx for the great content. How can I use this metod to change a Elementor video block?

[@BMikel]

Is it possible to use one function to change img src dynamically? Maybe create variable for img src and update it according to left link href

[@UrielSoto]

Can you elaborate on this?

[@prokassim]

Great Tutorial, thank you very much.

[@UrielSoto]

Thanks love what i do

[@AadityaSharmas]

It's working fine, if we want to replace not even an image but a div or full widget? (call to action elementor widget) then what will be code?

[@NiharSajal]

Thank you so much brother

[@DipeshSharma93]

Is it possible to add animation for images on change? If so, please share code. Thank you :)

[@fernandovalle05]

thank u, great tutorial.

[@TerryApodaca]

Great tutorial, but I have one request/issue: How can we change back to the very original image if the user closes all the tabs?

[@rikderks]

Have your desired first image as the accordeon item no1

[@lodeluyckx]

Thank you!

[@Moderator.]

Not working anymore.

[@freereinveterans]

I noticed the same unfortunately. The title "tab" labeling doesn't seem to exist anymore when I inspect. Looks like elementor updated their accordion widget and that may be part of the problem?

[@ThatGuyBarrold]

@@freereinveterans inspect the element. I had to update from "#elementor-tab-title-" to "#e-n-accordion-item-" and then it worked perfectly 👌😁

[@DeanneBawar]

@@ThatGuyBarrold Thank you for your comment!! I was lost because it's not working but your comment is the solution to make it work.

[@astralinerscity]

@@ThatGuyBarrold saved the day, thanks

[@watchandlearn7945]

Thank you and subsribed your channel 👍👍👍👍👍👍

[@rubenbad1869]

Nice work, Thanks. is it possible to get something similar but on hover! like using a icon box ou image box, 3 or 4 widgets, when we hover the text, the image change?

[@UrielSoto]

Yes Ill add it to the list. Change image on hovering a different element

[@tabeascherling6786]

How do I have to edit the code, when I have more than 1 of these accordions on one singe page?

[@DonDiablo_US]

Gracias

[@haley5501]

I need two of these accordions on the same page. It's not working under this instance.

[@robertacerami3036]

how can I use video instead img?

[@nenadjovanovic1626]

Hey man, got a more complicated problem so I thought if you have time you could help me. I have tabs, and above the tabs, actually the header pages that I want to be changed when the one of the tabs is clicked, I tried with slides but I'm new in this so I don't know how to connect them, I could try with images but I need template cuz there is text on that page, sorry for messy explanation, hope you see this.

[@ldelmar3875]

is there any solution that would not require coding? I basically just want the headlines on the left and the switch the content on the right (being different containers that I can edit and customize in elementor)

[@UrielSoto]

Using the experimental feature called nested elements or just adding a elementor template shortcode

[@luanafabianski2862]

testei exatamente como no vídeo e não funcionou

[@jhonatanlourencosimbahads6005]

Eu também!

[@dzakiahsana6]

This is SUPER dude!

[@PriyathamMuddala]

How do I do it for the Divi theme builder?

[@bySterling]

Very cool!

[@ariefhanyy]

I'm wondering if this mobile responsive too?

[@UrielSoto]

Yes it should

[@pedrosanhueza7747]

You're the best

[@bflsridersrepublic2999]

Is it possible to reverse this so that when you click on an image it opens the accordion.

[@gtech7932]

Can we do same with video?

[@GGT5323]

Thanks bro !

[@GGT5323]

I used it divi

[@secession77]

And how does it look on mobile view?

[@sergiopinna3818]

How can I use this metod to change a Elementor video block?

[@sergiopinna3818]

I found it!

[@AwaisKhokhar02]

I can't see any css to animate image while loading. It's just simply change.

[@justtubing3719]

Tried this but nothing worked.

[@akhileshkesharwani9209]

Brother this is not working with tab. have you made and tutorial on the same method using tab?

[@UrielSoto]

Tab might use a different css class

[@BrunoMucheroni]

no work in firefox

[@mayavadstudiosadmin]

not working in firefox, demonstrate with elementor pro

[@jessaesguerra5631]

How to add multiple images?

[@UrielSoto]

I'll have something coming out soon.