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!!
@@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?
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?
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?
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.
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)
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?
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!!
Can you share your modified jQuery code?
I dig this method for the switching images. Another good one! Cheers!
Thanks man! Nice to see you here
@@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?
Great video. I was looking for this and found it. Thanks for your amazing content. Keep them coming!!!
Thank you for helping people who don't use Pro.
Muito obrigado, salvou um brasileiro😀
Great & Easy Method, Thank You, Uriel Soto :)
Hi thx for the great content.
How can I use this metod to change a Elementor video block?
Thanks, just what I was looking for!
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?
Very HELPFUL!! THANK YOUU!
thank you, this worked perfectly
Nice! Thanks for sharing this Elementor trick!
Got you!
is there any css to make the image fade in/out whenever we switch between image? This is a great tutorial btw, thank you!
After this line: jQuery(".toggle-img img").attr('src',img)
Add this code:
.animate({opacity: '0'}).animate({ opacity: '1'});
Great Tutorial, thank you very much.
Thanks love what i do
Thank you!
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?
Thank you so much brother
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?
Yes Ill add it to the list. Change image on hovering a different element
Is it possible to add animation for images on change? If so, please share code. Thank you :)
thank u, great tutorial.
This is SUPER dude!
You're the best
How can we add elementor template instance of image
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
Can you elaborate on this?
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?
Have your desired first image as the accordeon item no1
Thank you and subsribed your channel 👍👍👍👍👍👍
Gracias
How do I do it for the Divi theme builder?
Thanks bro !
I used it divi
Can we do same with video?
Very cool!
How do I have to edit the code, when I have more than 1 of these accordions on one singe page?
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.
I'm wondering if this mobile responsive too?
Yes it should
I need two of these accordions on the same page. It's not working under this instance.
And how does it look on mobile view?
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)
Using the experimental feature called nested elements or just adding a elementor template shortcode
How can I use this metod to change a Elementor video block?
I found it!
Is it possible to reverse this so that when you click on an image it opens the accordion.
elementor new update id has changed please check that when configuring script
Brother this is not working with tab. have you made and tutorial on the same method using tab?
Tab might use a different css class
I can't see any css to animate image while loading. It's just simply change.
Tried this but nothing worked.
testei exatamente como no vídeo e não funcionou
Eu também!
Not working anymore.
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?
@@freereinveterans inspect the element. I had to update from "#elementor-tab-title-" to "#e-n-accordion-item-" and then it worked perfectly 👌😁
@@ThatGuyBarrold Thank you for your comment!! I was lost because it's not working but your comment is the solution to make it work.
@@ThatGuyBarrold saved the day, thanks
not working in firefox, demonstrate with elementor pro
How to add multiple images?
I'll have something coming out soon.
no work in firefox